I added a loading.tsx file to all my pages which looks like this:

import LoadingPage from '@/_components/LoadingPage'

export default function loading() {
  return <LoadingPage />
}

and the LoadingPage Component:

"use client"

import { TailSpin } from "react-loader-spinner"

export default function LoadingPage() {
    return (
        <div className="h-[100%] w-[100%] flex justify-center items-center">
            <TailSpin
                visible={true}
                height="50"
                width="50"
                color="hsl(var(--primary))"
                ariaLabel="tail-spin-loading"
                radius="1"
                wrapperStyle={{}}
                wrapperClass=""
            />
        </div>
    )
}

however when i try it, it works fine when i'm navigating to an already rendered page, but when i refresh (ctrl + r) or go to a not compiled page, the loader doesnt spin (see example video) (i added manual delay to the page for testing)

Where does this come from? and How can i fix this?