From 266e89b6562316701aeb6bbd9a3aba9c8c404178 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 28 Jul 2022 14:34:11 +0300
Subject: [PATCH] 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     | 38 ----------------------
 src/utils/routing/Page.tsx                 | 21 ------------
 src/utils/routing/layouts/NavbarLayout.tsx |  5 +--
 src/utils/routing/loadable.tsx             |  6 ++--
 src/utils/routing/usePage.ts               | 16 ---------
 5 files changed, 4 insertions(+), 82 deletions(-)
 delete mode 100644 src/utils/routing/FallbackProvider.tsx
 delete mode 100644 src/utils/routing/Page.tsx
 delete mode 100644 src/utils/routing/usePage.ts

diff --git a/src/utils/routing/FallbackProvider.tsx b/src/utils/routing/FallbackProvider.tsx
deleted file mode 100644
index 80c25fb..0000000
--- a/src/utils/routing/FallbackProvider.tsx
+++ /dev/null
@@ -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>
-    );
-};
\ No newline at end of file
diff --git a/src/utils/routing/Page.tsx b/src/utils/routing/Page.tsx
deleted file mode 100644
index cce2990..0000000
--- a/src/utils/routing/Page.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/utils/routing/layouts/NavbarLayout.tsx b/src/utils/routing/layouts/NavbarLayout.tsx
index ec5c8f2..cc63068 100644
--- a/src/utils/routing/layouts/NavbarLayout.tsx
+++ b/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 />
     </>
 };
diff --git a/src/utils/routing/loadable.tsx b/src/utils/routing/loadable.tsx
index b2130fb..d8eabce 100644
--- a/src/utils/routing/loadable.tsx
+++ b/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>
 );
diff --git a/src/utils/routing/usePage.ts b/src/utils/routing/usePage.ts
deleted file mode 100644
index 570d106..0000000
--- a/src/utils/routing/usePage.ts
+++ /dev/null
@@ -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 };
-};
\ No newline at end of file