fix: better loading

open-craft · Oct 25, 2023 · 2a0244d · 2a0244d
1 parent d2c4985
commit 2a0244d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/taxonomy/api/hooks/selectors.js b/src/taxonomy/api/hooks/selectors.js
@@ -63,19 +63,26 @@ export const useTaxonomyDetailDataResponse = (taxonomyId) => {
 /**
  * @param {number} taxonomyId
  * @param {import("../types.mjs").QueryOptions} options
- * @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
+ * @returns {
+   * Pick<
+     * import('@tanstack/react-query').UseQueryResult,
+     * "error" | "isError" | "isFetched" | "isLoading" | "isSuccess"
+   * >
+ * }
  */
 export const useTagListDataStatus = (taxonomyId, options) => {
   const {
-    isError,
     error,
+    isError,
     isFetched,
+    isLoading,
     isSuccess,
   } = useTagListData(taxonomyId, options);
   return {
-    isError,
     error,
+    isError,
     isFetched,
+    isLoading,
     isSuccess,
   };
 };

diff --git a/src/taxonomy/taxonomy-detail/TagListTable.jsx b/src/taxonomy/taxonomy-detail/TagListTable.jsx
@@ -13,31 +13,33 @@ const TagListTable = ({ taxonomyId }) => {
   });
 
   const useTagListData = () => {
-    const { isError, isFetched } = useTagListDataStatus(taxonomyId, options);
+    const { isError, isFetched, isLoading } = useTagListDataStatus(taxonomyId, options);
     const tagList = useTagListDataResponse(taxonomyId, options);
-    return { isError, isFetched, tagList };
+    return {
+      isError,
+      isFetched,
+      isLoading,
+      tagList,
+    };
   };
 
-  const { tagList, isFetched } = useTagListData();
+  const { tagList, isLoading } = useTagListData();
 
   const fetchData = (args) => {
     if (!_.isEqual(args, options)) {
       setOptions({ ...args });
     }
   };
 
-  if (!isFetched) {
-    return 'Loading...';
-  }
-
   return (
     <DataTable
+      isLoading={isLoading}
       isPaginated
       manualPagination
       fetchData={fetchData}
-      data={tagList.results}
-      itemCount={tagList.count}
-      pageCount={tagList.numPages}
+      data={tagList?.results || []}
+      itemCount={tagList?.count}
+      pageCount={tagList?.numPages}
       initialState={options}
       columns={[
         {