add full screen loader

pezzolabs · Nov 8, 2023 · f0a32fc · f0a32fc
1 parent ba56bfe
commit f0a32fc
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/apps/console/src/app.tsx b/apps/console/src/app.tsx
@@ -39,6 +39,7 @@ import { PromptVersionsView } from "./components/prompts/views/PromptVersionsVie
 import { PromptMetricsView } from "./components/prompts/views/PromptMetricsView";
 import { Suspense } from "react";
 import { BreakpointDebugger } from "./components/common/BreakpointDebugger";
+import { FullScreenLoader } from "./components/common/FullScreenLoader";
 
 initSuperTokens();
 
@@ -79,7 +80,7 @@ export function App() {
   return (
     <div className="relative h-full">
       <Toaster />
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<FullScreenLoader />}>
         <SuperTokensWrapper>
           <QueryClientProvider client={queryClient}>
             {/* Non-authorized routes */}

diff --git a/apps/console/src/components/common/FullScreenLoader.tsx b/apps/console/src/components/common/FullScreenLoader.tsx
@@ -0,0 +1,9 @@
+import { Loader } from "./Loader";
+
+export const FullScreenLoader = () => {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-background">
+      <Loader />
+    </div>
+  );
+};
diff --git a/apps/console/src/lib/providers/AuthProvider.tsx b/apps/console/src/lib/providers/AuthProvider.tsx
@@ -1,10 +1,7 @@
-import styled from "@emotion/styled";
 import { hotjar } from "react-hotjar";
 import { createContext, useContext, useEffect, useMemo } from "react";
 import { useGetCurrentUser } from "~/graphql/hooks/queries";
 import { GetMeQuery } from "~/@generated/graphql/graphql";
-import { LayoutWrapper } from "~/components/layout/LayoutWrapper";
-import { Loader } from "~/components/common/Loader";
 import { useIdentify } from "~/lib/utils/analytics";
 
 const AuthProviderContext = createContext<{
@@ -18,7 +15,7 @@ const AuthProviderContext = createContext<{
 export const useAuthContext = () => useContext(AuthProviderContext);
 
 export const AuthProvider = ({ children }) => {
-  const { data, isLoading, isError } = useGetCurrentUser();
+  const { data, isLoading } = useGetCurrentUser();
 
   const value = useMemo(
     () => ({
@@ -41,15 +38,7 @@ export const AuthProvider = ({ children }) => {
 
   return (
     <AuthProviderContext.Provider value={value}>
-      {isLoading || isError || !data ? (
-        <LayoutWrapper>
-          <div className="h-100vh flex items-center justify-center">
-            {isLoading ? <Loader /> : <p>Something went wrong</p>}
-          </div>
-        </LayoutWrapper>
-      ) : (
-        children
-      )}
+      {children}
     </AuthProviderContext.Provider>
   );
 };
diff --git a/apps/console/src/pages/prompts/PromptPage.tsx b/apps/console/src/pages/prompts/PromptPage.tsx
@@ -1,13 +1,14 @@
 import { PromptNavigation } from "./PromptNavigation";
 import { Outlet } from "react-router-dom";
 import { Suspense } from "react";
+import { FullScreenLoader } from "~/components/common/FullScreenLoader";
 
 export const PromptPage = () => {
   return (
     <>
       <PromptNavigation />
 
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<FullScreenLoader />}>
         <Outlet />
       </Suspense>
     </>

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -10,19 +10,39 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
-    "lib": ["es2017", "dom"],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@pezzo/client": ["libs/client/src/index.ts"],
-      "@pezzo/common": ["libs/common/src/index.ts"],
-      "@pezzo/kafka": ["libs/kafka/src/index.ts"],
-      "@pezzo/types": ["libs/types/src/index.ts"],
-      "@pezzo/ui": ["libs/ui/src/index.ts"],
-      "@pezzo/ui/*": ["libs/ui/src/*"],
-      "~/*": ["apps/console/src/*"]
+      "@pezzo/client": [
+        "libs/client/src/index.ts"
+      ],
+      "@pezzo/common": [
+        "libs/common/src/index.ts"
+      ],
+      "@pezzo/kafka": [
+        "libs/kafka/src/index.ts"
+      ],
+      "@pezzo/types": [
+        "libs/types/src/index.ts"
+      ],
+      "@pezzo/ui": [
+        "libs/ui/src/index.ts"
+      ],
+      "@pezzo/ui/*": [
+        "libs/ui/src/*"
+      ],
+      "~/*": [
+        "apps/console/src/*"
+      ]
     }
   },
-  "exclude": ["node_modules", "tmp"]
+  "exclude": [
+    "node_modules",
+    "tmp"
+  ]
 }