From 29ef1e4016a822dafcb46bac8b0b966655b6046c Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 3 Jun 2025 00:09:33 +0530
Subject: [PATCH] enhance UX for loading and empty states in contact table

---
 src/pages/Directory/Directory.jsx | 253 ++++++++++++++++--------------
 1 file changed, 137 insertions(+), 116 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 6b89127a..dc6661de 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -319,124 +319,145 @@ const handleDeleteContact = async (overrideId = null) => {
         </GlobalModel>
       )}
 
-      <div className="card p-2 card-minHeight">
-         <DirectoryPageHeader
-          searchText={searchText}
-          setSearchText={setSearchText}
-          setIsActive={setIsActive}
-          listView={listView}
-          setListView={setListView}
-          filteredBuckets={filteredBuckets}
-          tempSelectedBucketIds={tempSelectedBucketIds}
-          handleTempBucketChange={handleTempBucketChange}
-          filteredCategories={filteredCategories}
-          tempSelectedCategoryIds={tempSelectedCategoryIds}
-          handleTempCategoryChange={handleTempCategoryChange}
-          clearFilter={clearFilter}
-          applyFilter={applyFilter}
-          loading={loading}
-          IsActive={IsActive}
-          setOpenBucketModal={setOpenBucketModal}
-        />
-        {!listView && loading && <p>Loading...</p>}
-        {!listView && !loading && currentItems.length == 0 && (
-          <p>No Matching Contact Found</p>
-        )}
-        {listView ? (
-          <DirectoryListTableHeader>
-               {loading &&  (
-                  <tr>
-                    <td colSpan={10}>Loading...</td>
-                  </tr>
-                )}
-                {!loading && currentItems.length === 0 && (
-                  <tr>
-                    <td colSpan={10}>No Matching Contact Found</td>
-                  </tr>
-                )}
-               {!loading &&
-                  currentItems.map((contact) => (
-                    <ListViewDirectory
-                      key={contact.id}
-                      IsActive={IsActive}
-                      contact={contact}
-                      setSelectedContact={setSelectedContact}
-                      setIsOpenModal={setIsOpenModal}
-                      setOpen_contact={setOpen_contact}
-                      setIsOpenModalNote={setIsOpenModalNote}
-                      IsDeleted={setDeleteContact}
-                      restore={handleDeleteContact}
-                    />
-                  ))}
-            </DirectoryListTableHeader>
-        ) : (
-          <div className="row">
-            {!loading && currentItems.map((contact, index) => (
-              <div
-                key={contact.id}
-                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
-              >
-                <CardViewDirectory
-                  IsActive={IsActive}
-                  contact={contact}
-                  setSelectedContact={setSelectedContact}
-                  setIsOpenModal={setIsOpenModal}
-                  setOpen_contact={setOpen_contact}
-                  setIsOpenModalNote={setIsOpenModalNote}
-                  IsDeleted={setDeleteContact}
-                  restore={handleDeleteContact}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-        
-       
+  <div className="card p-2 card-minHeight">
+  <DirectoryPageHeader
+    searchText={searchText}
+    setSearchText={setSearchText}
+    setIsActive={setIsActive}
+    listView={listView}
+    setListView={setListView}
+    filteredBuckets={filteredBuckets}
+    tempSelectedBucketIds={tempSelectedBucketIds}
+    handleTempBucketChange={handleTempBucketChange}
+    filteredCategories={filteredCategories}
+    tempSelectedCategoryIds={tempSelectedCategoryIds}
+    handleTempCategoryChange={handleTempCategoryChange}
+    clearFilter={clearFilter}
+    applyFilter={applyFilter}
+    loading={loading}
+    IsActive={IsActive}
+    setOpenBucketModal={setOpenBucketModal}
+  />
 
-        {!loading  && currentItems < ITEMS_PER_PAGE && (
-          <nav aria-label="Page ">
-            <ul className="pagination pagination-sm justify-content-end py-1">
-              <li
-                className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}
+  {/* Messages when listView is false */}
+  {!listView && (
+    <div className="d-flex flex-column justify-content-center align-items-center text-center card-minHeight">
+      {loading && <p>Loading...</p>}
+      {!loading && contacts?.length === 0 && <p>No contact found</p>}
+      {!loading && contacts?.length > 0 && currentItems.length === 0 && (
+        <p>No matching contact found</p>
+      )}
+    </div>
+  )}
+
+  {/* Table view (listView === true) */}
+  {listView ? (
+    <DirectoryListTableHeader>
+      {loading && (
+        <tr>
+          <td colSpan={10}>Loading...</td>
+        </tr>
+      )}
+
+      {!loading && contacts?.length === 0 && (
+        <tr >
+          <td colSpan={10}>No contact found</td>
+        </tr>
+      )}
+
+      {!loading && currentItems.length === 0 && contacts?.length > 0 && (
+        <tr>
+          <td colSpan={10}>No matching contact found</td>
+        </tr>
+      )}
+
+      {!loading &&
+        currentItems.map((contact) => (
+          <ListViewDirectory
+            key={contact.id}
+            IsActive={IsActive}
+            contact={contact}
+            setSelectedContact={setSelectedContact}
+            setIsOpenModal={setIsOpenModal}
+            setOpen_contact={setOpen_contact}
+            setIsOpenModalNote={setIsOpenModalNote}
+            IsDeleted={setDeleteContact}
+            restore={handleDeleteContact}
+          />
+        ))}
+    </DirectoryListTableHeader>
+  ) : (
+    <div className="row">
+      {!loading &&
+        currentItems.map((contact) => (
+          <div
+            key={contact.id}
+            className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+          >
+            <CardViewDirectory
+              IsActive={IsActive}
+              contact={contact}
+              setSelectedContact={setSelectedContact}
+              setIsOpenModal={setIsOpenModal}
+              setOpen_contact={setOpen_contact}
+              setIsOpenModalNote={setIsOpenModalNote}
+              IsDeleted={setDeleteContact}
+              restore={handleDeleteContact}
+            />
+          </div>
+        ))}
+    </div>
+  )}
+
+  {/* Pagination */}
+  {!loading &&
+    contacts?.length > 0 &&
+    currentItems.length < ITEMS_PER_PAGE && (
+      <nav aria-label="Page navigation">
+        <ul className="pagination pagination-sm justify-content-end py-1">
+          <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+            <button
+              className="page-link btn-xs"
+              onClick={() => paginate(currentPage - 1)}
+            >
+              &laquo;
+            </button>
+          </li>
+
+          {[...Array(totalPages)].map((_, index) => (
+            <li
+              key={index}
+              className={`page-item ${
+                currentPage === index + 1 ? "active" : ""
+              }`}
+            >
+              <button
+                className="page-link"
+                onClick={() => paginate(index + 1)}
               >
-                <button
-                  className="page-link btn-xs"
-                  onClick={() => paginate(currentPage - 1)}
-                >
-                  &laquo;
-                </button>
-              </li>
-              {[...Array(totalPages)].map((_, index) => (
-                <li
-                  key={index}
-                  className={`page-item ${
-                    currentPage === index + 1 ? "active" : ""
-                  }`}
-                >
-                  <button
-                    className="page-link "
-                    onClick={() => paginate(index + 1)}
-                  >
-                    {index + 1}
-                  </button>
-                </li>
-              ))}
-              <li
-                className={`page-item ${
-                  currentPage === totalPages ? "disabled" : ""
-                }`}
-              >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(currentPage + 1)}
-                >
-                  &raquo;
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
-      </div>
+                {index + 1}
+              </button>
+            </li>
+          ))}
+
+          <li
+            className={`page-item ${
+              currentPage === totalPages ? "disabled" : ""
+            }`}
+          >
+            <button
+              className="page-link"
+              onClick={() => paginate(currentPage + 1)}
+            >
+              &raquo;
+            </button>
+          </li>
+        </ul>
+      </nav>
+    )}
+</div>
+
+
       </div>
   );
 };