From 537da847f291cabfaa8d394dbcd619763a0eed6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Tue, 15 Oct 2024 16:32:46 +0200
Subject: [PATCH 1/2] Display a skeleton while the tables load

---
 frontend/src/components/ui/skeleton.tsx       |  5 +--
 .../details/tables/global-regional/hooks.tsx  | 15 ++++++--
 .../details/tables/global-regional/index.tsx  | 35 ++++++++++++++++++-
 .../tables/national-highseas/hooks.tsx        |  6 ++--
 .../tables/national-highseas/index.tsx        | 35 ++++++++++++++++++-
 5 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index 62e1c96c..a536e806 100644
--- 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
index 127efcba..90ef9f8a 100644
--- 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
index e48c32ac..b537bed1 100644
--- 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
index de234b90..b0cbe89a 100644
--- 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
index 3b729ad2..8b53f094 100644
--- 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

From 9d468ebfb257a5eb24d176d3e82726cb3c1d6ef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Tue, 15 Oct 2024 16:36:58 +0200
Subject: [PATCH 2/2] Disable refetch on window focus

---
 frontend/src/pages/_app.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 5d6cd836..43f51011 100644
--- 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();