I'm trying to build a website in NextJS. In order to improve the UX, I created a Loader component.

The problem

The problem is that, when I start the Next server, even though the page is correctly compiled and ready, i can only see the loader gif. But when I refresh the page everything fix itself and the website loader disappear. How can I fix this first load?

What I tried

This is the code I've created for the components/LoaderWrapper.tsx:

"use client";

import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";

export default function LoadingWrapper({ children }: { children: React.ReactNode }) {
  const [isLoading, setIsLoading] = useState(true);
  const pathname = usePathname();

  useEffect(() => {
    setIsLoading(true);
    const timer = setTimeout(() => setIsLoading(false), 500); // Breve delay per evitare flickering

    return () => clearTimeout(timer);
  }, [pathname]);

  return (
    <AnimatePresence mode="wait">
      {isLoading ? (
        <motion.div
          key="loading"
          className="fixed inset-0 flex justify-center items-center bg-white"
          initial={{ opacity: 1 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        >
          <img src="/loader/loading.gif" alt="Loading..." className="w-20 h-20" />
          <p>La tua pagina si sta caricando. Attendi...</p>
        </motion.div>
      ) : (
        <motion.div
          key="content"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="w-full"
        >
          {children} {/* Ora tutto si carica insieme */}
        </motion.div>
      )}
    </AnimatePresence>
  );
}