Added the spinner until the session get's the image

src/app/page.tsx

@@ -1,12 +1,10 @@
-import Appbar from '@/components/Appbar/Appbar'
 import { Footer } from '@/components/Appbar/Footer'
 import Home from '@/components/Home/Home'
 import { ScrollToTopButton } from '@/components/ui/scroll-to-top-button'
 
 export default function Page() {
   return (
     <>
-      <Appbar />
       <Home />
       <Footer />
       <ScrollToTopButton />

src/components/Appbar/AppBarSkeleton.tsx

@@ -0,0 +1,27 @@
+const  AppBarSkeleton = () => {
+  return (
+    <header className="animate-pulse w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 bg-white md:bg-white/0 z-50 ">
+          <div className="container pl-32 px-4 ">
+            <div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-white/90 md:backdrop:blur-sm">
+              <div>
+                <div className="h-10 w-10 rounded-lg inline-flex justify-center items-center bg-gray-200">
+              </div>
+              </div>
+              <div className="hidden md:block">
+                <nav className="flex gap-8 rounded-md">
+                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
+                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
+                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
+                    <div className = 'rounded-md bg-gray-300 w-20 h-5'></div>
+                </nav>
+              </div>
+              <div className = 'rounded-md h-8 w-20 bg-gray-200'>
+              </div>
+            </div>
+          </div>
+        </header>
+  )
+}
+
+
+export default AppBarSkeleton;

src/components/Appbar/Appbar.tsx

@@ -1,21 +1,19 @@
 'use client'
-
 import Link from 'next/link'
-
 import Logo from '../icons/Logo'
 import { Menu } from 'lucide-react'
-import { useSession } from 'next-auth/react'
 import LoginWithGoogleButton from '../ui/login-with-google'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { FaWallet } from 'react-icons/fa6'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ProfileDropDown from '../common/ProfileDropDown'
+import { useSession } from 'next-auth/react'
 
 const Appbar = () => {
-  const { data } = useSession()
-  const router = useRouter()
+  const { data,status }  = useSession();
+  const router = useRouter();
   const [isMounted, setIsMounted] = useState(false)
   const { connected } = useWallet()
   const [opacity, setOpacity] = useState(1);
@@ -99,7 +97,7 @@ const Appbar = () => {
             {/*    <LoginWithGoogleButton />*/}
             {/*  </>*/}
             {/*)}*/}
-            {data && (
+            {status === "authenticated" && data && (
               <button
                 onClick={() => {
                   router.push('/wallet')
@@ -131,7 +129,7 @@ const Appbar = () => {
                     endIcon={<FaWallet />}
                   />
                 )}
-                <LoginWithGoogleButton />
+                {status === 'unauthenticated' && <LoginWithGoogleButton />}
               </>
             )}
             <span className="md:hidden">

src/components/Home/Hero.tsx

@@ -6,13 +6,14 @@ import Image from 'next/image'
 import Appbar from '../Appbar/Appbar'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
+import AppBarSkeleton from '../Appbar/AppBarSkeleton'
 
 const Hero = () => {
-  const session = useSession()
+  const session = useSession();
   const router = useRouter()
   return (
     <section className="items-center md:mt-40 mt-28">
-      <Appbar />
+      {session.status === 'loading' ? <AppBarSkeleton /> : <Appbar />}
       <div className="container relative mx-auto px-4">
         <Image
           src="https://res.cloudinary.com/dtc9ysbnn/image/upload/v1723236916/solana_eoqyva.svg"