From 29b7c5c8d10d5315fea27fc25f1f153c6c12dfbf Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 2 Mar 2024 20:45:11 +0000
Subject: fix: Fix hydration in list view caused by the spinner

---
 .../app/dashboard/bookmarks/components/BookmarksGrid.tsx    | 13 ++++++-------
 packages/web/app/dashboard/components/AllLists.tsx          | 12 ++++++++----
 .../web/app/dashboard/lists/components/AllListsView.tsx     |  8 +++-----
 3 files changed, 17 insertions(+), 16 deletions(-)

(limited to 'packages/web/app/dashboard')

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index 293b7765..554d20a0 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -5,15 +5,15 @@ import { ZBookmark, ZGetBookmarksRequest } from "@/lib/types/api/bookmarks";
 import { api } from "@/lib/trpc";
 import TextCard from "./TextCard";
 import { Slot } from "@radix-ui/react-slot";
-import Masonry from 'react-masonry-css';
-import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from '@/tailwind.config'
+import Masonry from "react-masonry-css";
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "@/tailwind.config";
 import { useMemo } from "react";
 
 function getBreakpointConfig() {
-  const fullConfig = resolveConfig(tailwindConfig)
+  const fullConfig = resolveConfig(tailwindConfig);
 
-  const breakpointColumnsObj: {[key: number]: number, default: number} = {
+  const breakpointColumnsObj: { [key: number]: number; default: number } = {
     default: 3,
   };
   breakpointColumnsObj[parseInt(fullConfig.theme.screens.lg)] = 2;
@@ -22,7 +22,6 @@ function getBreakpointConfig() {
   return breakpointColumnsObj;
 }
 
-
 function renderBookmark(bookmark: ZBookmark) {
   let comp;
   switch (bookmark.content.type) {
@@ -58,7 +57,7 @@ export default function BookmarksGrid({
     return <p>No bookmarks</p>;
   }
   return (
-    <Masonry className="flex gap-4" breakpointCols={breakpointConfig} >
+    <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
       {data.bookmarks.map((b) => renderBookmark(b))}
     </Masonry>
   );
diff --git a/packages/web/app/dashboard/components/AllLists.tsx b/packages/web/app/dashboard/components/AllLists.tsx
index c8b55d73..8903c82a 100644
--- a/packages/web/app/dashboard/components/AllLists.tsx
+++ b/packages/web/app/dashboard/components/AllLists.tsx
@@ -2,17 +2,21 @@
 
 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, {
+export default function AllLists({
+  initialData,
+}: {
+  initialData: { lists: ZBookmarkList[] };
+}) {
+  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 (
diff --git a/packages/web/app/dashboard/lists/components/AllListsView.tsx b/packages/web/app/dashboard/lists/components/AllListsView.tsx
index 155cdbcf..d81f5fca 100644
--- a/packages/web/app/dashboard/lists/components/AllListsView.tsx
+++ b/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">
-- 
cgit v1.2.3-70-g09d2