How to display a loading screen until browser stops loading all the content preferably without UseEffect in remix

Question

I wanted to display a loading screen until all the content of the browser is loaded (until that loading thing on the top of the browser tab stops loading). I have included an image that is very huge and takes time loading.

import { Outlet, useLoaderData, useRouteLoaderData } from '@remix-run/react';
import { loader } from '~/routes/_index';

    export default function RandomImageLayout() {
    
        return (
          <>
            <img
              src="https://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg"
              alt="Random Image"
              style={{ maxWidth: '100%' }}
            />
            <Outlet />
          </>
        );
    
    }