fix: Fix hydration in list view caused by the spinner

packages/web/app/dashboard/components/AllLists.tsx

@@ -2,17 +2,17 @@
 
 import { api } from "@/lib/trpc";
 import SidebarItem from "./SidebarItem";
-import LoadingSpinner from "@/components/ui/spinner";
 import NewListModal, { useNewListModal } from "./NewListModal";
 import { Plus } from "lucide-react";
 import Link from "next/link";
 import { ZBookmarkList } from "@/lib/types/api/lists";
 
 export default function AllLists({initialData}: {initialData: {lists: ZBookmarkList[]}}) {
-  const { data: lists } = api.lists.list.useQuery(undefined, {
+  let { data: lists } = api.lists.list.useQuery(undefined, {
     initialData,
   });
-
+  // TODO: This seems to be a bug in react query
+  lists ||= initialData;
   const { setOpen } = useNewListModal();
 
   return (

packages/web/app/dashboard/lists/components/AllListsView.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import LoadingSpinner from "@/components/ui/spinner";
 import { api } from "@/lib/trpc";
 import { ZBookmarkList } from "@/lib/types/api/lists";
 import { keepPreviousData } from "@tanstack/react-query";
@@ -35,14 +34,13 @@ export default function AllListsView({
   initialData: ZBookmarkList[];
 }) {
   const { setOpen: setIsNewListModalOpen } = useNewListModal();
-  const { data: lists } = api.lists.list.useQuery(undefined, {
+  let { data: lists } = api.lists.list.useQuery(undefined, {
     initialData: { lists: initialData },
     placeholderData: keepPreviousData,
   });
 
-  if (!lists) {
-    return <LoadingSpinner />;
-  }
+  // TODO: This seems to be a bug in react query
+  lists ||= {lists: initialData};
 
   return (
     <div className="flex flex-col flex-wrap gap-2 md:flex-row">

packages/web/lib/providers.tsx

@@ -9,14 +9,42 @@ 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,
 }: {
   children: React.ReactNode;
   session: Session | null;
 }) {
-  const [queryClient] = React.useState(() => new QueryClient());
+  const queryClient = getQueryClient();
 
   const [trpcClient] = useState(() =>
     api.createClient({