I'm working on a 3D globe visualization using React Three Fiber and the three-globe library. The globe takes 1-3 seconds to load. I've added a loading component using the useProgress hook from @react-three/drei, but the loader is not displaying as expected. It seems the Suspense fallback is not working properly (the loader element is not showing anything for 2 seconds).

### Problem Description

I want the loader to show the loading progress while the 3D globe is being prepared. Ideally, the loader screen should cover the entire page until the 3D globe is fully loaded. However, the loader does not display during the loading period.

Here's my full code [Globe.tsx](https://codefile.io/f/VoOP1KZu9L)


### Rendered HTML

before the globe loaded
<div class="h-[80vh] lg:h-full w-full md:flex lg:w-6/12 p-6 rounded-lg "></div>

Next JS version:14.2.3