sc-14336 Display a loading spinner before the entire page is loaded (landing page)

web/beacon-app/package.json

@@ -159,6 +159,7 @@
     "vite": "^4.0.0",
     "vite-plugin-babel": "^1.1.3",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-fonts": "^0.7.0",
     "vite-plugin-svgr": "^2.4.0",
     "vite-plugin-swc-react-refresh": "^2.2.1",
     "vite-tsconfig-paths": "^4.0.3",
@@ -171,4 +172,4 @@
   "engines": {
     "node": ">=14.19.1 <=18.x.x"
   }
-}
+}

web/beacon-app/src/application/routes/privateRoute.tsx

@@ -1,20 +1,34 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
-import DashLayout from '@/components/layout/DashLayout';
+import OvalLoader from '@/components/ui/OvalLoader';
 import { useAuth } from '@/hooks/useAuth';
 
-// interface PrivateRouteProps {
-//   component: React.FC;
-// }
+const DashLayout = React.lazy(() => import('@/components/layout/DashLayout'));
 
 const PrivateRoute = () => {
   const { isAuthenticated } = useAuth();
-  console.log('isAuthenticated', isAuthenticated);
+
   return isAuthenticated ? (
-    <DashLayout>
-      <Outlet />
-    </DashLayout>
+    <Suspense
+      fallback={
+        <div className="grid h-screen w-screen place-items-center">
+          <OvalLoader width="50px" height="50px" />
+        </div>
+      }
+    >
+      <DashLayout>
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <OvalLoader />
+            </div>
+          }
+        >
+          <Outlet />
+        </Suspense>
+      </DashLayout>
+    </Suspense>
   ) : (
     <Navigate to="/" />
   );

web/beacon-app/src/application/routes/root.tsx

@@ -1,13 +1,11 @@
+import React from 'react';
 import { createBrowserRouter, createRoutesFromElements, Outlet, Route } from 'react-router-dom';
 
 import { ErrorPage } from '@/components/Error/ErrorPage';
 import MainLayout from '@/components/layout/MainLayout';
 import { LoginPage, RegistrationPage, SuccessfulAccountCreation } from '@/features/auth';
-import { Home } from '@/features/home';
-import MemberDetailsPage from '@/features/members/components/MemeberDetailsPage';
 import { SetupTenantPage, WelcomePage } from '@/features/onboarding';
-import { OrganizationPage } from '@/features/organization';
-import { ProjectDetailPage } from '@/features/projects';
+import { lazyImport } from '@/utils/lazy-import';
 
 import PrivateRoute from './privateRoute';
 const Root = () => {
@@ -18,6 +16,16 @@ const Root = () => {
   );
 };
 
+const { Home } = lazyImport(() => import('@/features/home'), 'Home');
+const { ProjectDetailPage } = lazyImport(() => import('@/features/projects'), 'ProjectDetailPage');
+const MemberDetailsPage = React.lazy(
+  () => import('@/features/members/components/MemeberDetailsPage')
+);
+const { OrganizationPage } = lazyImport(
+  () => import('@/features/organization'),
+  'OrganizationPage'
+);
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<Root />} errorElement={<ErrorPage />}>

web/beacon-app/src/components/icons/oval.tsx

@@ -0,0 +1,43 @@
+function Oval(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      version="1.1"
+      id="loader-1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      width="40px"
+      height="40px"
+      viewBox="0 0 40 40"
+      enableBackground="new 0 0 40 40"
+      xmlSpace="preserve"
+      {...props}
+    >
+      <path
+        opacity="0.2"
+        fill="#000"
+        d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
+      />
+      <path
+        fill="#000"
+        d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+    C22.32,8.481,24.301,9.057,26.013,10.047z"
+      >
+        <animateTransform
+          attributeType="xml"
+          attributeName="transform"
+          type="rotate"
+          from="0 20 20"
+          to="360 20 20"
+          dur="0.6s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+  );
+}
+
+export default Oval;

web/beacon-app/src/components/ui/OvalLoader/OvalLoader.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+import Oval from '@/components/icons/oval';
+
+type ContainerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type OvalLoaderProps = {
+  containerProps?: ContainerProps;
+  children?: ReactNode;
+} & React.SVGProps<SVGSVGElement>;
+
+function OvalLoader({ containerProps, children, ...rest }: OvalLoaderProps) {
+  return (
+    <div {...containerProps}>
+      <Oval {...rest} />
+      <p>{children}</p>
+    </div>
+  );
+}
+
+export default OvalLoader;

web/beacon-app/src/components/ui/OvalLoader/index.ts

@@ -0,0 +1 @@
+export { default } from './OvalLoader';

web/beacon-app/src/index.css

@@ -1,6 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Quattrocento&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

web/beacon-app/src/utils/lazy-import.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+// named imports for React.lazy: https://github.com/facebook/react/issues/14603#issuecomment-726551598
+export function lazyImport<
+  T extends React.ComponentType<any>,
+  I extends { [K2 in K]: T },
+  K extends keyof I
+>(factory: () => Promise<I>, name: K): I {
+  return Object.create({
+    [name]: React.lazy(() => factory().then((module) => ({ default: module[name] }))),
+  });
+}
+
+// Usage
+// const { Home } = lazyImport(() => import("./Home"), "Home");

web/beacon-app/vite.config.ts

@@ -5,6 +5,7 @@ import eslint from 'vite-plugin-eslint';
 import svgrPlugin from 'vite-plugin-svgr';
 import tsConfigPaths from 'vite-tsconfig-paths';
 import lingui from '@lingui/vite-plugin';
+import { VitePluginFonts } from 'vite-plugin-fonts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,6 +17,11 @@ export default defineConfig({
     svgrPlugin(),
     tsConfigPaths(),
     lingui(),
+    VitePluginFonts({
+      google: {
+        families: ['Montserrat', 'Quattrocento'],
+      },
+    }),
   ],
   resolve: {
     alias: {

web/beacon-app/yarn.lock

@@ -17635,6 +17635,13 @@ vite-plugin-eslint@^1.8.1:
     "@types/eslint" "^8.4.5"
     rollup "^2.77.2"
 
+vite-plugin-fonts@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-fonts/-/vite-plugin-fonts-0.7.0.tgz#e7fb971cf77a35cd027b9d9e5caa77c2227cbecb"
+  integrity sha512-fisKirkQrA2RFwcyI96SENLu1FyRYNIiC/l5DGdD8oV3OsAWGrYKs0e7/VZF6l0rm0QiYA2sOVTzYfrLAzP9cw==
+  dependencies:
+    fast-glob "^3.2.11"
+
 vite-plugin-svgr@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.4.0.tgz#9b14953955e79893ea7718089b9777a494e38fc6"