refactor: Better colocate suspense (#4863)

site/src/components/AuthAndFrame/AuthAndFrame.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
-import { FC, useContext } from "react"
+import { Loader } from "components/Loader/Loader"
+import { FC, Suspense, useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
@@ -16,14 +17,15 @@ interface AuthAndFrameProps {
 export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
   const styles = useStyles()
   const xServices = useContext(XServiceContext)
-
   const [buildInfoState] = useActor(xServices.buildInfoXService)
 
   return (
     <RequireAuth>
       <div className={styles.site}>
         <Navbar />
-        <div className={styles.siteContent}>{children}</div>
+        <div className={styles.siteContent}>
+          <Suspense fallback={<Loader />}>{children}</Suspense>
+        </div>
         <Footer buildInfo={buildInfoState.context.buildInfo} />
       </div>
     </RequireAuth>

site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

@@ -5,6 +5,7 @@ import { Sidebar } from "./Sidebar"
 import React, {
   createContext,
   PropsWithChildren,
+  Suspense,
   useContext,
   useEffect,
 } from "react"
@@ -52,7 +53,7 @@ export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
             <DeploySettingsContext.Provider
               value={{ deploymentConfig: deploymentConfig }}
             >
-              {children}
+              <Suspense fallback={<Loader />}>{children}</Suspense>
             </DeploySettingsContext.Provider>
           ) : (
             <Loader />

site/src/components/TemplateLayout/TemplateLayout.tsx

@@ -15,7 +15,13 @@ import {
   PageHeaderTitle,
 } from "components/PageHeader/PageHeader"
 import { useOrganizationId } from "hooks/useOrganizationId"
-import { createContext, FC, PropsWithChildren, useContext } from "react"
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  Suspense,
+  useContext,
+} from "react"
 import {
   Link as RouterLink,
   Navigate,
@@ -33,6 +39,7 @@ import {
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { Permissions } from "xServices/auth/authXService"
+import { Loader } from "components/Loader/Loader"
 
 const Language = {
   settingsButton: "Settings",
@@ -224,7 +231,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({ children }) => {
         <TemplateLayoutContext.Provider
           value={{ permissions, context: templateState.context }}
         >
-          {children}
+          <Suspense fallback={<Loader />}>{children}</Suspense>
         </TemplateLayoutContext.Provider>
       </Margins>
 

site/src/pages/WorkspacePage/WorkspacePage.tsx

@@ -4,7 +4,7 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { FC, useEffect } from "react"
 import { useParams } from "react-router-dom"
-import { FullScreenLoader } from "components/Loader/FullScreenLoader"
+import { Loader } from "components/Loader/Loader"
 import { firstOrItem } from "util/array"
 import { workspaceMachine } from "xServices/workspace/workspaceXService"
 import { WorkspaceReadyPage } from "./WorkspaceReadyPage"
@@ -55,7 +55,7 @@ export const WorkspacePage: FC = () => {
         />
       </Cond>
       <Cond>
-        <FullScreenLoader />
+        <Loader />
       </Cond>
     </ChooseOne>
   )