Adding Loading Indicator On Remix Parent Layout When the Loader (any loaders from childrens) Take Some times to load

Remix Parent Layout.tsx

import { Toaster, toast } from 'react-hot-toast';

export default function M() {
  const navigation = useNavigation();
  const location = useLocation();
  
  // we only wants the loading shows if the route navigations
  // are not from a form Submissions
  const isRequestLoading = navigation.state === "loading";
  const isRequestAFormSubmission = Boolean(navigation.formAction);
  
  useEffect(() => {
    let timeoutId: ReturnType<typeof setTimeout>;

    if (isRequestLoading && !isRequestAFormSubmission) {
      timeoutId = setTimeout(() => {
        toast.loading('Memuat halaman...', {
          duration: Infinity,
          position: 'top-center',
        });
      }, 1000); // show the loading if 1secs have passed
    }
    
    return () => {
      clearTimeout(timeoutId);
      toast.dismiss();
    };
  }, [isRequestLoading, isRequestAFormSubmission, location]);

  return (
    <>
      <Layout>
        <Suspense fallback={<div>Loading...</div>}>
          <Outlet />
        </Suspense>
      </Layout>
    </>
  );
}