Fix user image not showing issue

Author: coderomm

src/components/Appbar.tsx

@@ -6,10 +6,19 @@ import { useSession } from "next-auth/react";
 import { motion } from "framer-motion";
 import { Button } from "./ui/button";
 import UserAccountDropDown from "./UserAccountDropDown";
+import { useEffect, useState } from "react";
+import { Circle } from "lucide-react";
 
 export const Appbar = () => {
- const session = useSession();
- const user = session.data?.user;
+ // const session = useSession();
+ // const user = session.data?.user;
+ const [initialLoading, setInitialLoading] = useState<boolean>(true);
+ const { data: session, status } = useSession();
+ useEffect(() => {
+ if (status !== "loading") {
+ setInitialLoading(false);
+ }
+ }, [status, session]);
 
  return (
  <nav className="sticky mx-auto wrapper top-0 z-50 flex items-center gap-2 w-full">
@@ -20,32 +29,18 @@ export const Appbar = () => {
  className="flex w-full justify-between mx-auto bg-secondary/15 shadow-lg shadow-neutral-600/5 backdrop-blur-lg border border-primary/10 p-4 rounded-b-2xl lg:px-24"
  >
  <Link href={"/"} className="flex items-center gap-2 cursor-pointer">
- {/* <Image
- src={"https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg"}
- alt="Logo"
- width={300}
- height={200}
- className="rounded-full size-10"
- /> */}
  <span className="text-2xl md:text-3xl font-bold tracking-tight text-foreground block custom-text-color animate-pulse backdrop-blur-lg">
  Imaginate AI
  </span>
  </Link>
  <div className="flex items-center gap-8">
- {!user ? (
- <Button
- size={"lg"}
- onClick={async () => {
- await signIn('google');
- }}
- >
- Login
- </Button>
+ {initialLoading && status === "loading" ? (
+ <Circle className="animate-spin" />
+ ) : !session ? (
+ <Button size={"lg"} onClick={async () => { await signIn('google'); }}>Login</Button>
  ) : (
- ""
+ <UserAccountDropDown />
  )}
-
- <UserAccountDropDown />
  </div>
  </motion.div>
  </nav>

src/components/UserAccountDropDown.tsx

@@ -6,7 +6,6 @@ import { LogOut, UserRound } from "lucide-react";
 import { useRouter } from "next/navigation";
 import UserImage from "./UserImage";
 import { motion, AnimatePresence } from "framer-motion";
-// import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
 import { Button } from "./ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
 

src/components/UserImage.tsx

@@ -1,11 +1,12 @@
-import Image from "next/image";
+/* eslint-disable @next/next/no-img-element */
+// import Image from "next/image";
 import React from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function UserImage(image:any ) {
+export default function UserImage({ image }: any) {
  return (
  <div>
- <Image
+ <img
  className="w-full h-full rounded-full cursor-pointer"
  src={image || ""}
  width={100}