Fix blank page on initial load

CruGlobal · Dec 6, 2023 · 9e346fb · 9e346fb
1 parent 6815918
commit 9e346fb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/src/components/User/Preferences/UserPreferenceProvider.tsx b/src/components/User/Preferences/UserPreferenceProvider.tsx
@@ -1,5 +1,4 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { useSession } from 'next-auth/react';
 import i18next from 'src/lib/i18n';
 import { useGetUserQuery } from '../GetUser.generated';
 
@@ -19,20 +18,19 @@ interface Props {
   children?: React.ReactNode;
 }
 export const UserPreferenceProvider: React.FC<Props> = ({ children }) => {
-  const { data: session } = useSession();
-  const { data: user, loading } = useGetUserQuery({ skip: !session });
+  const { data } = useGetUserQuery();
   const [locale, setLocale] = useState('en-US');
 
   useEffect(() => {
-    if (user) {
-      i18next.changeLanguage(user.user.preferences?.language ?? 'en');
-      setLocale(user.user.preferences?.locale ?? 'en-US');
+    if (data) {
+      i18next.changeLanguage(data.user.preferences?.language ?? 'en');
+      setLocale(data.user.preferences?.locale ?? 'en-US');
     }
-  }, [user]);
+  }, [data]);
 
   return (
     <UserPreferenceContext.Provider value={{ locale }}>
-      {!loading && children}
+      {children}
     </UserPreferenceContext.Provider>
   );
 };
diff --git a/src/lib/client.ts b/src/lib/client.ts
@@ -54,8 +54,9 @@ const httpLink = new BatchHttpLink({
   fetch,
 });
 
-const errorLink = onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors) {
+const clientErrorLink = onError(({ graphQLErrors, networkError }) => {
+  // Don't show sign out and display errors on the login page because the user won't be logged in
+  if (graphQLErrors && window.location.pathname !== '/login') {
     graphQLErrors.map(({ message, extensions }) => {
       if (extensions?.code === 'AUTHENTICATION_ERROR') {
         signOut({ redirect: true, callbackUrl: 'signOut' }).then(() => {
@@ -101,7 +102,7 @@ if (process.browser && process.env.NODE_ENV === 'production') {
 }
 
 const client = new ApolloClient({
-  link: errorLink.concat(httpLink),
+  link: clientErrorLink.concat(httpLink),
   cache,
   assumeImmutableResults: true,
   defaultOptions: {

diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
@@ -15,10 +15,10 @@ i18next
       useSuspense: false,
     },
     detection: {
-      order: ['navigator', 'htmlTag'],
+      order: ['localStorage', 'navigator', 'htmlTag'],
     },
     backend: {
-      loadPath: '../../locales/{{lng}}/translation.json',
+      loadPath: '/locales/{{lng}}/translation.json',
     },
   });