'use client';

const Universe = dynamic(() => import('@/components/universe/universe'), {
  ssr: false,
  loading: () => {
    console.log('loading');
    return (
      <div className="h-full w-full bg-[#523871]">
        <p className="text-2xl font-bold text-red-500">Loading...</p>
      </div>
    );
  },
});

const Home: NextPage = () => {
  useAndroidInAppBrowserHandler();
  const { isLoading, data } = useCheckLogin();

  if (isLoading && data === undefined) return null;

  return (
    <>
      <ToastContainer
        position="top-center"
        theme="dark"
        autoClose={1000}
        hideProgressBar
        draggable={false}
        transition={Slide}
      />
      <div className="main pointer-events-auto relative z-0 h-full overflow-hidden bg-transparent">
        <Universe />

        {isDesktop && <Chatbot />}
        <GPTModalHandler />
      </div>
    </>
  );
};

export default Home;

Hi I'm having a problem with my dynamic import rendering twice. The log 'loading' appears twice in the console. I have removed my imports due privacy issues. But nothing is wrong with the imports. I have React.strictmode to false in my next config. I do have a loading screen in my 'universe' component which renders a 3d scene. So basically when I refresh, it shows dynamic import loading -> scene loading screen -> dynamic import loading -> scene loading screen -> full render. Sorry for my bad english, it is not my first language.