fix: Fix hydration in list view caused by the spinner

1 files changed, 29 insertions, 1 deletions

diff --git a/packages/web/lib/providers.tsx b/packages/web/lib/providers.tsx
index 0c721c1e..5c4649b5 100644
--- a/packages/web/lib/providers.tsx
+++ b/packages/web/lib/providers.tsx
@@ -9,6 +9,34 @@ import superjson from "superjson";
 import { SessionProvider } from "next-auth/react";
 import { Session } from "next-auth";
 
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important so we don't re-make a new client if React
+    // supsends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
+
 export default function Providers({
   children,
   session,
@@ -16,7 +44,7 @@ export default function Providers({
   children: React.ReactNode;
   session: Session | null;
 }) {
-  const [queryClient] = React.useState(() => new QueryClient());
+  const queryClient = getQueryClient();
 
   const [trpcClient] = useState(() =>
     api.createClient({