fix: remove AnimatePresence from Game page and add animation to next …

…round

apps/client/src/app/room/[code]/game/[gameId]/game.tsx

@@ -174,22 +174,20 @@ export default function Game({ gameInfo, session }: GameProps) {
         <div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
           <Menu session={session} roomCode={gameInfo.game.roomCode} />
         </div>
-        <AnimatePresence mode="wait">
-          {isMounted ? (
-            <CurrentGameComponent
-              key={state.value as string}
-              gameInfo={gameInfo}
-              state={state}
-              send={send}
-              hostId={hostId}
-              submittedPlayerIds={submittedPlayerIds}
-              currFaceOffQuestion={currFaceOffQuestion}
-              votedPlayers={votedPlayers}
-              leaderboard={leaderboard}
-              session={session}
-            />
-          ) : null}
-        </AnimatePresence>
+        {isMounted ? (
+          <CurrentGameComponent
+            key={state.value as string}
+            gameInfo={gameInfo}
+            state={state}
+            send={send}
+            hostId={hostId}
+            submittedPlayerIds={submittedPlayerIds}
+            currFaceOffQuestion={currFaceOffQuestion}
+            votedPlayers={votedPlayers}
+            leaderboard={leaderboard}
+            session={session}
+          />
+        ) : null}
       </section>
     </main>
   );

apps/client/src/components/game/face-off.tsx

@@ -49,6 +49,7 @@ const FaceOff = ({
     setLoading(false);
     setVoteSubmitted(true);
   };
+
   return (
     <div className="mx-auto max-w-2xl">
       {currQuestionGenerations ? (

apps/client/src/components/game/next-round.tsx

@@ -9,7 +9,11 @@ type NextRoundProps = {
 
 const NextRound = ({ nextQueryNum, totalQueries }: NextRoundProps) => {
   return (
-    <h2 className="relative text-center text-3xl md:text-5xl">
+    <motion.h2
+      initial={{ y: 10, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      className="relative text-center text-3xl md:text-5xl"
+    >
       Round{" "}
       <span className="relative">
         <span className="opacity-0">{nextQueryNum}</span>
@@ -37,7 +41,7 @@ const NextRound = ({ nextQueryNum, totalQueries }: NextRoundProps) => {
         </span>
       </span>{" "}
       of {totalQueries}
-    </h2>
+    </motion.h2>
   );
 };
 

apps/client/src/utils/query-provider.tsx

@@ -1,14 +1,49 @@
 "use client";
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 
-const queryClient = new QueryClient();
+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 (isServer) {
+    // 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
+    // suspends 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 QueryProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );