From 92a0e44f57791da6e91ee91861e2cb4c8ef197e8 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <28705606+theofficialnar@users.noreply.github.com>
Date: Sat, 3 Feb 2024 03:52:32 +0800
Subject: [PATCH] Do not unmount shell when session expires (#2473)

* task: do not unmount shell when session is invalid

* task: use backdrop mui component
---
 src/shell/components/load-instance/index.js |  7 ++++++-
 src/shell/components/private-route/index.js | 15 ++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/shell/components/load-instance/index.js b/src/shell/components/load-instance/index.js
index 7d175a21b5..c65b01fe74 100644
--- a/src/shell/components/load-instance/index.js
+++ b/src/shell/components/load-instance/index.js
@@ -33,11 +33,16 @@ export default connect((state) => {
     languages: state.languages,
     files: state.files,
     role: state.userRole.systemRole.name,
+    auth: state.auth,
   };
 })(
   memo(function LoadInstance(props) {
     const [error, setError] = useState("");
     useEffect(() => {
+      if (!props.auth.valid) {
+        return;
+      }
+
       props.dispatch(fetchInstance()).then((res) => {
         if (res.status !== 200) {
           setError("You do not have permission to access this instance");
@@ -66,7 +71,7 @@ export default connect((state) => {
       props.dispatch(fetchFiles("views"));
       props.dispatch(fetchFiles("stylesheets"));
       props.dispatch(fetchFiles("scripts"));
-    }, []);
+    }, [props.auth]);
 
     useEffect(() => {
       if (
diff --git a/src/shell/components/private-route/index.js b/src/shell/components/private-route/index.js
index 76dadd863d..f68c10b43e 100644
--- a/src/shell/components/private-route/index.js
+++ b/src/shell/components/private-route/index.js
@@ -6,7 +6,7 @@ import Login from "shell/components/login";
 import { notify } from "shell/store/notifications";
 import { verify } from "shell/store/auth";
 import { Staging } from "../Staging";
-import { CircularProgress } from "@mui/material";
+import { CircularProgress, Backdrop } from "@mui/material";
 
 export default connect((state) => {
   return {
@@ -70,13 +70,18 @@ export default connect((state) => {
     });
     return (
       <>
-        {props.auth.valid ? (
-          props.children
-        ) : (
+        {props.children}
+
+        <Backdrop
+          sx={{
+            zIndex: (theme) => theme.zIndex.tooltip + 10, // Needs to be on top of everything
+          }}
+          open={!props.auth.valid}
+        >
           <Staging>
             {props.auth.checking ? <CircularProgress /> : <Login />}
           </Staging>
-        )}
+        </Backdrop>
       </>
     );
   })