From a7247f854abaa87c2a1eadd6810a2b1f5f979400 Mon Sep 17 00:00:00 2001
From: haraseessingh <harasees1202@gmail.com>
Date: Sun, 5 Nov 2023 16:49:03 +0530
Subject: [PATCH] loader appears on top of content

---
 pages/_app.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index c3ae733ca..cf30136c4 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import React from "react";
 import { LinearProgress } from "@mui/material";
 import { SessionProvider } from "next-auth/react";
+import zIndex from "@mui/material/styles/zIndex";
 
 const font = Josefin_Sans({
     preload: false,
@@ -33,7 +34,20 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
     return (
         <SessionProvider session={session}>
             <main className={font.className} style={{ position: "relative" }}>
-                {isLoading ? <LinearProgress /> : null}
+            {isLoading && (
+                <div
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 999, // Set a high z-index to overlay on top
+                    }}
+                >
+                    <LinearProgress />
+                </div>
+                )}
                 <Component {...pageProps} />
             </main>
         </SessionProvider>