Align page loading indicator

packages/stack-server/package.json

@@ -12,7 +12,7 @@
     "dev": "npm run todo; next dev --port 8101",
     "build": "npm run todo; npm run codegen && next build",
     "analyze-bundle": "npm run todo; ANALYZE_BUNDLE=1 npm run build",
-    "start": "npm run todo; next start",
+    "start": "npm run todo; next start --port 8101",
     "codegen": "npm run todo; npm run prisma -- generate",
     "psql": "npm run todo; npm run with-env -- bash -c 'psql $DATABASE_CONNECTION_STRING'",
     "prisma": "npm run todo; npm run with-env -- prisma",

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/loading.tsx

@@ -1,11 +1,9 @@
-import { Box } from "@mui/joy";
 import { PageLoadingIndicator } from "@/components/page-loading-indicator";
 
 export default function Loading() {
   return (
     <>
       <PageLoadingIndicator />
-      <Box sx={{ height: '100vh' }} />
     </>
   );
 }

packages/stack-server/src/app/loading.tsx

@@ -1,10 +1,9 @@
 import { PageLoadingIndicator } from "@/components/page-loading-indicator";
-import { Paragraph } from "@/components/paragraph";
 
 export default function Loading() {
   return (
-    <Paragraph body>
+    <>
       <PageLoadingIndicator />
-    </Paragraph>
+    </>
   );
 }

packages/stack-server/src/components/page-loading-indicator.tsx

@@ -2,25 +2,29 @@ import { Box, LinearProgress } from "@mui/joy";
 
 export function PageLoadingIndicator() {
   return (
-    <Box
-      position="fixed"
-      top={0}
-      left={0}
-      right={0}
-      zIndex={9999999}
-      sx={{
-        pointerEvents: "none",
-      }}
-    >
-      <LinearProgress
-        variant="solid"
+    <Box>
+      <Box
+        position="fixed"
+        top={0}
+        left={0}
+        right={0}
+        zIndex={9999999}
         sx={{
-          width: '100%',
-          "--LinearProgress-thickness": "5px",
-          "--LinearProgress-radius": "0px",
-          "--LinearProgress-progressRadius": "5px"      
+          pointerEvents: "none",
+          backgroundColor: "green",
         }}
-      />
+      >
+        <LinearProgress
+          variant="solid"
+          color="danger"
+          sx={{
+            width: '100%',
+            "--LinearProgress-thickness": "5px",
+            "--LinearProgress-radius": "0px",
+            "--LinearProgress-progressRadius": "5px"      
+          }}
+        />
+      </Box>
     </Box>
   );
 }

packages/stack-server/src/theme.tsx

@@ -44,7 +44,7 @@ const theme = extendTheme({
     JoyLink: {
       defaultProps: {
         // eslint-disable-next-line react/display-name
-        component: React.forwardRef((props, ref) => (<NextLink {...props} ref={ref} prefetch={false} />)),
+        component: React.forwardRef((props, ref) => (<NextLink {...props} ref={ref} />)),
         ...{
           "data-n2-clickable": true,
         } as any,