[BUG] #464 All pages reload and scroll to top when returning to tab …

lib/fetcher.ts

@@ -2,6 +2,10 @@ import axios from 'axios';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const fetcher = async (...args: any[]) => {
+  if (!args[0]) {
+    return null;
+  }
+
   const response = await axios(args[0]);
   if (response.status !== 200) {
     throw new Error('An error occurred while fetching the data.');

pages/_app.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { AppProps } from 'next/app';
 import useSWR from 'swr';
-import { SessionProvider } from 'next-auth/react';
+import { SessionProvider, useSession } from 'next-auth/react';
 import { Loader2 } from 'lucide-react';
 import { AppContextProvider } from '@/context/AppContextProvider';
 import { AppDataContext } from '@/context/Common/CommonContext';
@@ -13,13 +13,22 @@ import { ShareModal } from '@/components/Modals/ShareModal';
 import { ThemeProvider } from '@/components/ThemeProvider/ThemeProvider';
 import '@/styles/globals.css';
 
-export default function MyApp({ Component, pageProps }: AppProps) {
+type AppContentProps = {
+  Component: AppProps['Component'];
+  pageProps: AppProps['pageProps'];
+};
+
+function AppContent({ Component, pageProps }: AppContentProps) {
   const getUserDetailsApiUrl = `/api/user/details`;
   const [randomKey, setRandomKey] = useState();
 
+  const { status: currentUserStatus } = useSession();
+
+  const isAuth = currentUserStatus === 'authenticated';
+
   const { data: profileDetails, isLoading: isDetailsLoading } = useSWR(
-    getUserDetailsApiUrl,
-    fetcher,
+    isAuth ? getUserDetailsApiUrl : null,
+    isAuth ? fetcher : () => null,
     { errorRetryCount: 0 }
   );
 
@@ -30,27 +39,33 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     setRandomKey,
   };
 
+  return (
+    <ThemeProvider attribute="class" enableSystem>
+      <AppContextProvider>
+        <AppDataContext.Provider value={commonContextData}>
+          <Toaster />
+          <AuthModal />
+          <ShareModal />
+          {!isDetailsLoading ? (
+            <>
+              <ProgressBar />
+              <Component {...pageProps} />
+            </>
+          ) : (
+            <div className="flex h-dvh w-screen items-center justify-center">
+              <Loader2 className="h-10 w-10 animate-spin" />
+            </div>
+          )}
+        </AppDataContext.Provider>
+      </AppContextProvider>
+    </ThemeProvider>
+  );
+}
+
+export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <SessionProvider session={pageProps.session}>
-      <ThemeProvider attribute="class" enableSystem>
-        <AppContextProvider>
-          <AppDataContext.Provider value={commonContextData}>
-            <Toaster />
-            <AuthModal />
-            <ShareModal />
-            {!isDetailsLoading ? (
-              <>
-                <ProgressBar />
-                <Component {...pageProps} />
-              </>
-            ) : (
-              <div className="flex h-dvh w-screen items-center justify-center">
-                <Loader2 className="h-10 w-10 animate-spin" />
-              </div>
-            )}
-          </AppDataContext.Provider>
-        </AppContextProvider>
-      </ThemeProvider>
+      <AppContent Component={Component} pageProps={pageProps} />
     </SessionProvider>
   );
 }