refactor: use WithLoading in Summary

Author: joshunrau

apps/web/src/components/Layout/Layout.tsx

@@ -1,10 +1,20 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+
+import { Outlet, useLocation } from 'react-router-dom';
+
+import { queryClient } from '@/services/react-query';
 
 import { Footer } from '../Footer';
 import { Navbar } from '../Navbar';
 import { Sidebar } from '../Sidebar';
 
 export const Layout = () => {
+  // const location = useLocation();
+
+  // useEffect(() => {
+  //   queryClient.clear();
+  // }, [location.pathname]);
+
   return (
     <div className="flex h-screen w-screen flex-col md:flex-row">
       <div className="absolute md:hidden">

apps/web/src/features/dashboard/components/Summary.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { ClipboardDocumentIcon, DocumentTextIcon, UserIcon, UsersIcon } from '@heroicons/react/24/solid';
+import type { Summary as SummaryType } from '@opendatacapture/schemas/summary';
 
-import { LoadingFallback } from '@/components/LoadingFallback';
+import { WithFallback } from '@/components/WithFallback';
 import { useAppStore } from '@/store';
 
 import { StatisticCard } from '../components/StatisticCard';
@@ -17,46 +18,49 @@ export const Summary = () => {
     }
   });
 
-  if (!summaryQuery.data) {
-    return <LoadingFallback />;
-  }
-
   return (
-    <div className="body-font">
-      <div className="grid grid-cols-1 gap-5 text-center lg:grid-cols-2">
-        <StatisticCard
-          icon={<UsersIcon className="h-12 w-12" />}
-          label={t({
-            en: 'Total Users',
-            fr: "Nombre d'utilisateurs"
-          })}
-          value={summaryQuery.data.counts.users}
-        />
-        <StatisticCard
-          icon={<UserIcon className="h-12 w-12" />}
-          label={t({
-            en: 'Total Subjects',
-            fr: 'Nombre de clients'
-          })}
-          value={summaryQuery.data.counts.subjects}
-        />
-        <StatisticCard
-          icon={<ClipboardDocumentIcon className="h-12 w-12" />}
-          label={t({
-            en: 'Total Instruments',
-            fr: "Nombre d'instruments"
-          })}
-          value={summaryQuery.data.counts.instruments}
-        />
-        <StatisticCard
-          icon={<DocumentTextIcon className="h-12 w-12" />}
-          label={t({
-            en: 'Total Records',
-            fr: "Nombre d'enregistrements"
-          })}
-          value={summaryQuery.data.counts.records}
-        />
-      </div>
-    </div>
+    <WithFallback
+      Component={({ data }: { data: SummaryType }) => (
+        <div className="body-font">
+          <div className="grid grid-cols-1 gap-5 text-center lg:grid-cols-2">
+            <StatisticCard
+              icon={<UsersIcon className="h-12 w-12" />}
+              label={t({
+                en: 'Total Users',
+                fr: "Nombre d'utilisateurs"
+              })}
+              value={data.counts.users}
+            />
+            <StatisticCard
+              icon={<UserIcon className="h-12 w-12" />}
+              label={t({
+                en: 'Total Subjects',
+                fr: 'Nombre de clients'
+              })}
+              value={data.counts.subjects}
+            />
+            <StatisticCard
+              icon={<ClipboardDocumentIcon className="h-12 w-12" />}
+              label={t({
+                en: 'Total Instruments',
+                fr: "Nombre d'instruments"
+              })}
+              value={data.counts.instruments}
+            />
+            <StatisticCard
+              icon={<DocumentTextIcon className="h-12 w-12" />}
+              label={t({
+                en: 'Total Records',
+                fr: "Nombre d'enregistrements"
+              })}
+              value={data.counts.records}
+            />
+          </div>
+        </div>
+      )}
+      props={{
+        data: summaryQuery.data
+      }}
+    />
   );
 };