Added improved loading screen (#148)

components/ClientWrapper.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { ReactNode, useEffect } from 'react'
+import { ReactNode, Suspense, useEffect, useState } from 'react'
 import { useAtom } from 'jotai'
 import { aboutOpenAtom, pomodoroAtom, userSelectAtom } from '@/lib/atoms'
 import PomodoroTimer from './PomodoroTimer'
 import UserSelectModal from './UserSelectModal'
 import { useSession } from 'next-auth/react'
 import AboutModal from './AboutModal'
+import LoadingSpinner from './LoadingSpinner'
 
 export default function ClientWrapper({ children }: { children: ReactNode }) {
   const [pomo] = useAtom(pomodoroAtom)
@@ -14,6 +15,12 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
   const [aboutOpen, setAboutOpen] = useAtom(aboutOpenAtom)
   const { data: session, status } = useSession()
   const currentUserId = session?.user.id
+  const [isMounted, setIsMounted] = useState(false);
+
+  // block client-side hydration until mounted (this is crucial to wait for all jotai atoms to load), to prevent SSR hydration errors in the children components
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   useEffect(() => {
     if (status === 'loading') return
@@ -22,6 +29,9 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
     }
   }, [currentUserId, status, userSelect])
 
+  if (!isMounted) {
+    return <LoadingSpinner />
+  }
   return (
     <>
       {children}