perf: prefetch resources

The-Commit-Company · Dec 15, 2024 · ecd6b25 · ecd6b25
1 parent bbdc626
commit ecd6b25
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -124,6 +124,14 @@
   <link rel="apple-touch-startup-image"
     media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
     href="/splash_screens/8.3__iPad_Mini_portrait.png">
+
+  {% if (frappe.session.user != "Guest " and frappe.session.user != "Guest") %}
+  <link rel="preload" href="/api/method/frappe.auth.get_logged_user" as="fetch" crossorigin="use-credentials">
+  <link rel="preload" href="/api/method/raven.api.workspaces.get_list" as="fetch" crossorigin="use-credentials">
+  <link rel="preload" href="/api/method/raven.api.raven_users.get_list" as="fetch" crossorigin="use-credentials">
+  <link rel="preload" href="/api/method/raven.api.raven_channel.get_all_channels?hide_archived=false" as="fetch"
+    crossorigin="use-credentials">
+  {% endif %}
 </head>
 
 <body>

diff --git a/frontend/src/components/layout/AuthContainer.tsx b/frontend/src/components/layout/AuthContainer.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, useContext } from 'react'
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading } from '@radix-ui/themes';
 import { FullPageLoader } from "./Loaders/FullPageLoader";
 import { Link } from 'react-router-dom';
 import { UserContext } from '@/utils/auth/UserProvider';
@@ -10,7 +10,7 @@ const AuthContainer = ({ children, ...props }: PropsWithChildren) => {
 
     return (
         <Box className={'min-h-screen'}>
-            <Flex justify='center' align='center' className={'h-screen w-full dark:bg-[#191919]'}>
+            <Flex justify='center' align='center' className={'min-h-screen w-full dark:bg-[#191919]'}>
                 {
                     isLoading ? <FullPageLoader /> :
                         <Box className={'w-full max-w-md p-8'}>

diff --git a/frontend/src/utils/auth/ProtectedRoute.tsx b/frontend/src/utils/auth/ProtectedRoute.tsx
@@ -1,14 +1,20 @@
 import { useContext } from 'react'
 import { Navigate, Outlet } from 'react-router-dom'
-import { FullPageLoader } from '@/components/layout/Loaders/FullPageLoader'
 import { UserContext } from './UserProvider'
+import { Flex, Text } from '@radix-ui/themes'
+import { Stack } from '@/components/layout/Stack'
 
 export const ProtectedRoute = () => {
 
     const { currentUser, isLoading } = useContext(UserContext)
 
     if (isLoading) {
-        return <FullPageLoader />
+        return <Flex justify='center' align='center' height='100vh' width='100vw' className='animate-fadein'>
+            <Stack className='text-center' gap='1'>
+                <Text size='7' className='cal-sans tracking-normal'>raven</Text>
+                <Text color='gray' weight='medium'>Setting up your workspace...</Text>
+            </Stack>
+        </Flex>
     }
     else if (!currentUser || currentUser === 'Guest') {
         return <Navigate to="/login" />

diff --git a/frontend/src/utils/users/UserListProvider.tsx b/frontend/src/utils/users/UserListProvider.tsx
@@ -1,9 +1,9 @@
 import { useFrappeDocTypeEventListener, useFrappeGetCall, useSWRConfig } from "frappe-react-sdk";
 import { PropsWithChildren, createContext, useEffect, useMemo, useState } from "react";
 import { ErrorBanner } from "@/components/layout/AlertBanner/ErrorBanner";
-import { FullPageLoader } from "@/components/layout/Loaders/FullPageLoader";
-import { Box, Flex, Link } from "@radix-ui/themes";
+import { Box, Flex, Link, Text } from "@radix-ui/themes";
 import { RavenUser } from "@/types/Raven/RavenUser";
+import { Stack } from "@/components/layout/Stack";
 
 
 export const UserListContext = createContext<{ users: UserFields[], enabledUsers: UserFields[] }>({
@@ -53,7 +53,12 @@ export const UserListProvider = ({ children }: PropsWithChildren) => {
     }, [data])
 
     if (isLoading) {
-        return <FullPageLoader />
+        return <Flex justify='center' align='center' height='100vh' width='100vw' className='animate-fadein'>
+            <Stack className='text-center' gap='1'>
+                <Text size='7' className='cal-sans tracking-normal'>raven</Text>
+                <Text color='gray' weight='medium'>Setting up your workspace...</Text>
+            </Stack>
+        </Flex>
     }
     if (usersError) {
         return <Flex align='center' justify='center' px='4' mx='auto' className="w-[50vw] h-screen">