So I made a Navbar component with a Dark Mode button myself and came across an issue: due to the default caching behavior, when I load the website for the first time, the wrong default image and button are shown. I found a solution by setting a mount value so that it gets rendered later, but this made it feel like it's loading too slowly. Does anyone have any tips or help on how to resolve this problem more effectively?

export default function Navbar(){

const {setTheme,resolvedTheme} = useTheme();
const [mounted, setMounted] = useState(false);

useEffect(() => {
setMounted(true);
}, []);

interface NavbarProps {
initialTheme: string;
}


const handleThemeToggle = () => {
setTheme(resolvedTheme === "dark" ? "light" : "dark");
};
if(!mounted){
return
}

return(
#Unknown Channel
<nav className="navbar">
<div className="navbar-item-container">
<ul className="navbar-ul">
<Link href="/profile" className="navbar-item">Profile <Image src={resolvedTheme === "dark" ? pbImgdark : pbImg} alt="profile image"/></Link>
<Link href="/projects" className="navbar-item">Projects</Link>
<Link href="/dashboard" className="navbar-item">Dashboard</Link>
</ul>
</div>
<button onClick={handleThemeToggle}>
<Image src={ resolvedTheme === "dark" ? dark : light} height={32} alt="lightmode logo"/>
</button>
<button>Logout</button>
</nav>
</>
);
}