Merge pull request #324 from Vizzuality/SKY30-487-fe-implement-a-way-…

…to-indicate-when-the-data-of-a-table-is-loading Indicate to the user when the tables are loading
Vizzuality · Oct 15, 2024 · ad4950f · ad4950f
2 parents 1956698 + 9d468eb
commit ad4950f
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 12 deletions.
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
@@ -2,10 +2,7 @@ import { cn } from '@/lib/classnames';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      className={cn('animate-pulse rounded-md bg-slate-100 dark:bg-slate-800', className)}
-      {...props}
-    />
+    <div className={cn('animate-pulse bg-slate-100 dark:bg-slate-800', className)} {...props} />
   );
 }
 

diff --git a/frontend/src/containers/map/content/details/tables/global-regional/hooks.tsx b/frontend/src/containers/map/content/details/tables/global-regional/hooks.tsx
@@ -314,7 +314,12 @@ export const useData = (
 ) => {
   const locale = useLocale();
 
-  const { data: locationType, isSuccess: isLocationSuccess } = useGetLocations<string>(
+  const {
+    data: locationType,
+    isSuccess: isLocationSuccess,
+    isLoading: isLocationLoading,
+    isFetching: isLocationFetching,
+  } = useGetLocations<string>(
     {
       locale,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -343,7 +348,7 @@ export const useData = (
     }
   }
 
-  const { data } = useGetProtectionCoverageStats<
+  const { data, isLoading, isFetching } = useGetProtectionCoverageStats<
     [GlobalRegionalTableColumns[], ProtectionCoverageStatListResponseMetaPagination]
   >(
     {
@@ -467,5 +472,9 @@ export const useData = (
     }
   );
 
-  return data;
+  return {
+    data,
+    isLoading: isLoading || isLocationLoading,
+    isFetching: isFetching || isLocationFetching,
+  };
 };
diff --git a/frontend/src/containers/map/content/details/tables/global-regional/index.tsx b/frontend/src/containers/map/content/details/tables/global-regional/index.tsx
@@ -7,6 +7,7 @@ import { usePreviousImmediate } from 'rooks';
 
 import FiltersButton from '@/components/filters-button';
 import TooltipButton from '@/components/tooltip-button';
+import { Skeleton } from '@/components/ui/skeleton';
 import Table from '@/containers/map/content/details/table';
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import { FCWithMessages } from '@/types';
@@ -47,7 +48,11 @@ const GlobalRegionalTable: FCWithMessages = () => {
     pageSize: 100,
   });
 
-  const [data, { total }] = useData(
+  const {
+    data: [data, { total }],
+    isLoading,
+    isFetching,
+  } = useData(
     locationCode as string,
     tab === 'marine' || tab === 'terrestrial' ? tab : null,
     sorting,
@@ -68,6 +73,34 @@ const GlobalRegionalTable: FCWithMessages = () => {
     setPagination((prevPagination) => ({ ...prevPagination, pageIndex: 0 }));
   }, [filters, sorting]);
 
+  // While the data is loading, we're showing a table with skeletons
+  if (isLoading || isFetching) {
+    const newColumns = columns.map((column) => ({
+      ...column,
+      cell: () => (
+        <div className="text-4xl font-bold">
+          <Skeleton className="my-3 h-4 w-full" />
+        </div>
+      ),
+    }));
+
+    const newData = data.length > 0 ? data : [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
+
+    return (
+      <Table
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        columns={newColumns}
+        data={newData}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        rowCount={total ?? 0}
+      />
+    );
+  }
+
   return (
     <Table
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx
@@ -708,7 +708,9 @@ export const useData = (
   );
 
   // If the user isn't filtering, only one request is sufficient to get all of the table's data
-  const { data } = useGetPas<[NationalHighseasTableColumns[], PaListResponseMetaPagination]>(
+  const { data, isLoading, isFetching } = useGetPas<
+    [NationalHighseasTableColumns[], PaListResponseMetaPagination]
+  >(
     {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -748,5 +750,5 @@ export const useData = (
     }
   );
 
-  return data;
+  return { data, isLoading, isFetching };
 };
diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx
@@ -7,6 +7,7 @@ import { usePreviousImmediate } from 'rooks';
 
 import FiltersButton from '@/components/filters-button';
 import TooltipButton from '@/components/tooltip-button';
+import { Skeleton } from '@/components/ui/skeleton';
 import Table from '@/containers/map/content/details/table';
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import { FCWithMessages } from '@/types';
@@ -47,7 +48,11 @@ const NationalHighseasTable: FCWithMessages = () => {
     pageSize: 100,
   });
 
-  const [data, { total }] = useData(
+  const {
+    data: [data, { total }],
+    isLoading,
+    isFetching,
+  } = useData(
     locationCode as string,
     tab === 'marine' || tab === 'terrestrial' ? tab : null,
     sorting,
@@ -68,6 +73,34 @@ const NationalHighseasTable: FCWithMessages = () => {
     setPagination((prevPagination) => ({ ...prevPagination, pageIndex: 0 }));
   }, [filters, sorting]);
 
+  // While the data is loading, we're showing a table with skeletons
+  if (isLoading || isFetching) {
+    const newColumns = columns.map((column) => ({
+      ...column,
+      cell: () => (
+        <div className="text-4xl font-bold">
+          <Skeleton className="my-3 h-4 w-full" />
+        </div>
+      ),
+    }));
+
+    const newData = data.length > 0 ? data : [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
+
+    return (
+      <Table
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        columns={newColumns}
+        data={newData}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        rowCount={total ?? 0}
+      />
+    );
+  }
+
   return (
     <Table
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -29,7 +29,9 @@ type Props = AppProps & {
 const App: React.FC<AppProps> = ({ Component, pageProps }: Props) => {
   // Never ever instantiate the client outside a component, hook or callback as it can leak data
   // between users
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } })
+  );
 
   const router = useRouter();