fix: revert the blank-pages fix

The blank-pages fix that kept the current page mounted until the new page is ready seems to cause several severe visual bugs on some pages, so for now I reverted it until a better solution is found.

src/utils/routing/FallbackProvider.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import LoadingPage from 'src/Components/LoadingPage/LoadingPage';
-
-export type FallbackType = NonNullable<React.ReactNode> | null;
-
-export interface FallbackContextType {
-    updateFallback: (fallback: FallbackType) => void;
-}
-
-export const FallbackContext = React.createContext<FallbackContextType>({
-    updateFallback: () => { },
-});
-
-interface FabllbackProviderProps {
-}
-
-export const FallbackProvider: React.FC<React.PropsWithChildren<FabllbackProviderProps>> = ({
-    children,
-}) => {
-    const [fallback, setFallback] = React.useState<FallbackType>(null);
-
-    const updateFallback = React.useCallback((fallback: FallbackType) => {
-        setFallback(() => <>
-            <LoadingPage />
-            {fallback}
-        </>);
-    }, []);
-
-    const renderChildren = React.useMemo(() => {
-        return children;
-    }, [children]);
-
-    return (
-        <FallbackContext.Provider value={{ updateFallback }}>
-            <React.Suspense fallback={fallback}>{renderChildren}</React.Suspense>
-        </FallbackContext.Provider>
-    );
-};

src/utils/routing/Page.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { usePage } from './usePage';
-
-interface LoadablePagePageProps { }
-
-const LoadablePage: React.FC<React.PropsWithChildren<LoadablePagePageProps>> = ({ children }) => {
-    const { onLoad } = usePage();
-
-    const render = React.useMemo(() => {
-        return <>{children}</>;
-    }, [children]);
-
-    React.useEffect(() => {
-        onLoad(render);
-    }, [onLoad, render]);
-
-
-    return render;
-};
-
-export default LoadablePage;

src/utils/routing/layouts/NavbarLayout.tsx

@@ -1,12 +1,9 @@
 import { Outlet, } from 'react-router-dom';
 import Navbar from "src/Components/Navbar/Navbar";
-import { FallbackProvider } from '../FallbackProvider';
 
 export const NavbarLayout = () => {
     return <>
         <Navbar />
-        <FallbackProvider>
-            <Outlet />
-        </FallbackProvider>
+        <Outlet />
     </>
 };

src/utils/routing/loadable.tsx

@@ -1,8 +1,8 @@
+import { Suspense } from "react";
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
-import LoadablePage from "./Page";
 
 export const Loadable = (Component: any, Loading = LoadingPage) => (props: any) => (
-    <LoadablePage>
+    <Suspense fallback={<Loading />}>
         <Component {...props} />
-    </LoadablePage>
+    </Suspense>
 );

src/utils/routing/usePage.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { FallbackContext, FallbackType } from './FallbackProvider';
-
-export const usePage = () => {
-    const { updateFallback } = React.useContext(FallbackContext);
-
-    const onLoad = React.useCallback(
-        (component: FallbackType | undefined) => {
-            if (component === undefined) component = null;
-            updateFallback(component);
-        },
-        [updateFallback]
-    );
-
-    return { onLoad };
-};