From 98e383125ae3b8ba34a20a5b583f24c1c09689e8 Mon Sep 17 00:00:00 2001
From: Emilio Heinzmann <emiliosheinz@gmail.com>
Date: Thu, 6 Jun 2024 20:26:46 -0300
Subject: [PATCH] refactor: improve app loader

---
 src/app/map/page.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index 728422e..901d818 100644
--- 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>
   );
 }