Avoid layout shifts

Author: garronej

web/src/ui/pages/s3Explorer/Explorer.tsx

@@ -135,14 +135,36 @@ export function Explorer(props: Props) {
 
     const { cx, css, theme } = useStyles();
 
+    if (
+        isCurrentWorkingDirectoryLoaded &&
+        currentWorkingDirectoryView.directoryPath !== directoryPath
+    ) {
+        return (
+            <div
+                className={cx(
+                    css({
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%"
+                    }),
+                    className
+                )}
+            >
+                <CircularProgress />
+            </div>
+        );
+    }
+
     if (!isCurrentWorkingDirectoryLoaded) {
         return (
             <div
                 className={cx(
                     css({
                         display: "flex",
                         justifyContent: "center",
-                        alignItems: "center"
+                        alignItems: "center",
+                        height: "100%"
                     }),
                     className
                 )}

web/src/ui/pages/s3Explorer/Page.tsx

@@ -359,7 +359,9 @@ function S3ProfileSelect() {
 }
 
 const useStyles = tss.withName({ S3Explorer }).create(({ theme }) => ({
-    root: {},
+    root: {
+        height: "100%"
+    },
     explorer: {
         marginTop: theme.spacing(4)
     }