refactor: improve app loader

emiliosheinz · Jun 6, 2024 · 98e3831 · 98e3831
1 parent ccfaf51
commit 98e3831
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -8,13 +8,14 @@ import { api } from "~/trpc/react";
 
 const DEFAULT_LOCATION: LatLngTuple = [-30.0346, -51.2177]; // Porto Alegre
 
+const Loader = <Skeleton className="h-[75vh] w-full max-w-7xl rounded-md" />;
 const MapComponent = dynamic(() => import("~/components/map/"), {
-  loading: () => <Skeleton className="h-[75vh] w-full max-w-7xl rounded-md" />,
   ssr: false,
+  loading: () => Loader,
 });
 
 export default function Map() {
-  const { data: shelters, isLoading } = api.shelter.findAll.useQuery();
+  const [shelters] = api.shelter.findAll.useSuspenseQuery();
   const [userLocation, setUserLocation] =
     useState<LatLngTuple>(DEFAULT_LOCATION);
 
@@ -32,12 +33,9 @@ export default function Map() {
 
   return (
     <main className="relative flex w-full justify-center px-2 pt-8">
-      <MapComponent userLocation={userLocation} shelter={shelters ?? []} />
-      {isLoading && (
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-          <Loader2 className="size-8 animate-spin" />
-        </div>
-      )}
+      <Suspense fallback={Loader}>
+        <MapComponent userLocation={userLocation} shelter={shelters} />
+      </Suspense>
     </main>
   );
 }