🐛(frontend) fix app shallow reload

The app was doing a shallow reload when user
was coming from another tab and the user data
was staled. We stop to block the app during the
loading state, depend the response the app
will manage correctly its states.

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
 - 🚸(frontend) redirect on current url tab after 401 #2197
 - 🐛(frontend) abort check media status unmount #2194
 - ✨(backend) order pinned documents by last updated at #2028
+- 🐛(frontend) fix app shallow reload #2231
 - 🐛(frontend) fix interlinking modal clipping #2213
 - 🛂(frontend) fix cannot manage member on small screen #2226
 - 🐛(backend) load jwks url when OIDC_RS_PRIVATE_KEY_STR is set

src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts

@@ -52,7 +52,7 @@ test.describe('Doc Create', () => {
     ).toBeVisible();
   });
 
-  test('it creates a doc with link "/doc/new/', async ({
+  test('it creates a doc with link "/docs/new/"', async ({
     page,
     browserName,
   }) => {

src/frontend/apps/impress/src/features/auth/components/Auth.tsx

@@ -18,32 +18,30 @@ import { FirstConnection } from './FirstConnection';
 
 export const Auth = ({ children }: PropsWithChildren) => {
   const {
-    isLoading: isAuthLoading,
+    isAuthLoading,
     pathAllowed,
-    isFetchedAfterMount,
     authenticated,
-    fetchStatus,
+    hasInitiallyLoaded,
     user,
   } = useAuth();
-  const isLoading = fetchStatus !== 'idle' || isAuthLoading;
   const [isRedirecting, setIsRedirecting] = useState(false);
   const { data: config } = useConfig();
   const shouldTrySilentLogin = useMemo(
     () =>
       !authenticated &&
       !hasTrySilent() &&
-      !isLoading &&
+      !isAuthLoading &&
       !isRedirecting &&
       config?.FRONTEND_SILENT_LOGIN_ENABLED,
     [
       authenticated,
-      isLoading,
+      isAuthLoading,
       isRedirecting,
       config?.FRONTEND_SILENT_LOGIN_ENABLED,
     ],
   );
   const shouldTryLogin =
-    !authenticated && !isLoading && !isRedirecting && !pathAllowed;
+    !authenticated && !isAuthLoading && !isRedirecting && !pathAllowed;
   const { replace, pathname } = useRouter();
 
   /**
@@ -104,7 +102,7 @@ export const Auth = ({ children }: PropsWithChildren) => {
   ]);
 
   const shouldShowLoader =
-    (isLoading && !isFetchedAfterMount) ||
+    !hasInitiallyLoaded ||
     isRedirecting ||
     (!authenticated && !pathAllowed) ||
     shouldTrySilentLogin;

src/frontend/apps/impress/src/features/auth/hooks/useAuth.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useAnalytics } from '@/libs';
 
@@ -12,6 +12,12 @@ export const useAuth = () => {
   const { pathname } = useRouter();
   const { trackEvent } = useAnalytics();
   const [hasTracked, setHasTracked] = useState(authStates.isFetched);
+  const isAuthLoading =
+    authStates.fetchStatus !== 'idle' || authStates.isLoading;
+  const hasInitiallyLoaded = useRef(false);
+  if (authStates.isFetched) {
+    hasInitiallyLoaded.current = true;
+  }
   const [pathAllowed, setPathAllowed] = useState<boolean>(
     !regexpUrlsAuth.some((regexp) => !!pathname.match(regexp)),
   );
@@ -35,6 +41,8 @@ export const useAuth = () => {
     user,
     authenticated: !!user && authStates.isSuccess,
     pathAllowed,
+    hasInitiallyLoaded: hasInitiallyLoaded.current,
+    isAuthLoading,
     ...authStates,
   };
 };