feat: new route loader

iforge-uos · Apr 17, 2024 · d6f3454 · d6f3454
1 parent d318e00
commit d6f3454
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 76 deletions.
diff --git a/apps/forge/src/components/routing/Loading.tsx b/apps/forge/src/components/routing/Loading.tsx
@@ -5,8 +5,8 @@ import { Loader } from "@ui/components/ui/loader.tsx";
 export const Loading = () => {
   return (
     <React.Fragment>
-      <Title prompt="Loading..." />
-      <div className="flex items-center justify-center w-full min-h-[80vh] px-4">
+      <Title prompt="Loading...!!" />
+      <div className="flex items-center justify-center w-full min-h-svh px-4">
         <div className="grid items-center gap-4 text-center">
           <div className="space-y-2">
             <Loader />

diff --git a/apps/forge/src/main.tsx b/apps/forge/src/main.tsx
@@ -1,73 +1,70 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "@/index.css";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
-import {ThemeProvider} from "@/components/theme-provider";
-import {createRouter, RouterProvider} from "@tanstack/react-router";
-import {HelmetProvider} from "react-helmet-async";
-import {Provider} from "react-redux";
-import {persistor, store} from "@/redux/store";
-
-import {PersistGate} from "redux-persist/integration/react";
-import {routeTree} from "@/routeTree.gen.ts";
-import {Toaster} from "@ui/components/ui/sonner.tsx";
-import {AuthProvider, useAuth} from "@/components/auth-provider";
-import LoadingView from "@/components/loading-view";
-import posthog from 'posthog-js'
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ThemeProvider } from "@/components/theme-provider";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { HelmetProvider } from "react-helmet-async";
+import { Provider } from "react-redux";
+import { persistor, store } from "@/redux/store";
 
+import { PersistGate } from "redux-persist/integration/react";
+import { routeTree } from "@/routeTree.gen.ts";
+import { Toaster } from "@ui/components/ui/sonner.tsx";
+import { AuthProvider, useAuth } from "@/components/auth-provider";
+import posthog from "posthog-js";
+import { Loading } from "@/components/routing/Loading.tsx";
 
 // Begin Router
 const queryClient = new QueryClient();
 
 const router = createRouter({
-    routeTree,
-    context: {
-        queryClient,
-        auth: undefined!,
-    },
-    defaultPreload: "intent",
-    // Since we're using React Query, we don't want loader calls to ever be stale
-    // This will ensure that the loader is always called when the route is preloaded or visited
-    defaultPreloadStaleTime: 0,
-    defaultPendingComponent: () => <LoadingView/>,
+  routeTree,
+  context: {
+    queryClient,
+    auth: undefined!,
+  },
+  defaultPreload: "intent",
+  // Since we're using React Query, we don't want loader calls to ever be stale
+  // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreloadStaleTime: 0,
 });
 
 declare module "@tanstack/react-router" {
-    interface Register {
-        router: typeof router;
-    }
+  interface Register {
+    router: typeof router;
+  }
 }
 
-
 function InnerApp() {
-    const auth = useAuth()
-    posthog.init('phc_XIzxR3RXcdmcyMPJCCnQFtxoL0gRshzEXo4kM925LvA', {api_host: 'https://web-mkc4o00.sampiiiii.dev'})
-    return <RouterProvider router={router} context={{auth}}/>
+  const auth = useAuth();
+  posthog.init("phc_XIzxR3RXcdmcyMPJCCnQFtxoL0gRshzEXo4kM925LvA", { api_host: "https://web-mkc4o00.sampiiiii.dev" });
+  return <RouterProvider router={router} context={{ auth }} />;
 }
 
 const rootElement = document.getElementById("root");
 
 if (rootElement) {
-    ReactDOM.createRoot(rootElement).render(
-        <React.StrictMode>
-            <QueryClientProvider client={queryClient}>
-                <HelmetProvider>
-                    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                        <Provider store={store}>
-                            <PersistGate loading={<LoadingView/>} persistor={persistor}>
-                                <AuthProvider>
-                                    <InnerApp/>
-                                    <Toaster/>
-                                </AuthProvider>
-                            </PersistGate>
-                        </Provider>
-                    </ThemeProvider>
-                </HelmetProvider>
-                <ReactQueryDevtools initialIsOpen={false}/>
-            </QueryClientProvider>
-        </React.StrictMode>,
-    );
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <HelmetProvider>
+          <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+            <Provider store={store}>
+              <PersistGate loading={<Loading />} persistor={persistor}>
+                <AuthProvider>
+                  <InnerApp />
+                  <Toaster />
+                </AuthProvider>
+              </PersistGate>
+            </Provider>
+          </ThemeProvider>
+        </HelmetProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
 } else {
-    console.error("Root element not found");
+  console.error("Root element not found");
 }
diff --git a/apps/forge/src/routes/index.tsx b/apps/forge/src/routes/index.tsx
@@ -1,28 +1,28 @@
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import Title from "@/components/title";
-import {LampContainer} from "@ui/components/lamp.tsx";
-import {motion} from "framer-motion";
+import { LampContainer } from "@ui/components/lamp.tsx";
+import { motion } from "framer-motion";
 
 const IndexComponent = () => {
-    return (
-        <>
-            <Title prompt="Index"/>
-            <LampContainer>
-                <motion.h1
-                    initial={{opacity: 0.5, y: 100}}
-                    whileInView={{opacity: 1, y: 0}}
-                    transition={{
-                        delay: 0.3,
-                        duration: 0.8,
-                        ease: "easeInOut",
-                    }}
-                    className="mt-8 bg-gradient-to-br from-slate-500 to-slate-900 dark:from-slate-300 dark:to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
-                >
-                    iForge <br/> <p className="mt-2 uppercase text-m text-sm"></p>
-                </motion.h1>
-            </LampContainer>
-        </>
-    );
+  return (
+    <>
+      <Title prompt="Index" />
+      <LampContainer>
+        <motion.h1
+          initial={{ opacity: 0.5, y: 100 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="mt-8 bg-gradient-to-br from-slate-500 to-slate-900 dark:from-slate-300 dark:to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
+        >
+          iForge <br /> <p className="mt-2 uppercase text-m text-sm" />
+        </motion.h1>
+      </LampContainer>
+    </>
+  );
 };
 
-export const Route = createFileRoute("/")({component: IndexComponent});
+export const Route = createFileRoute("/")({ component: IndexComponent });