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

@@ -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 (

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>
       </>
     );
   })