brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

loading screen circle is now properly centered all the time

Browse source
This commit is contained in:
Carter 2025-04-16 10:21:43 -06:00
parent a27baa8b4a
commit 9df40db30f
2 changed files with 61 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/LoadingScreen.tsx
View file

@ -9,7 +9,20 @@ export default function LoadingScreen(props: Props) {
const theme = useTheme();
return (
<Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
<Box
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
textAlign: "center",
}}
>
<CircularProgress
size={150}
style={{ marginBottom: theme.spacing(4) }}

91
src/navigation/Router.tsx
View file

@ -8,6 +8,7 @@ import { ErrorBoundary } from "react-error-boundary";
import { getWhitelabel } from "services/whiteLabel";
import Ventilation from "pages/VentEditor";
import { useGlobalState } from "providers";
import { Box } from "@mui/material";
const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
const DevicePage = lazy(() => import("pages/Device"));
@ -288,52 +289,54 @@ export default function Router() {
return (
<BrowserRouter>
<Header />
<Suspense fallback={<LoadingScreen />}>
<Routes>
{/* Redirects */}
<Route path="/callback" element={<Navigate to="/" />} />
{/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
{/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
<Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />
{/* Page routes */}
{/* <Route index element={<Typography>Hello!</Typography>} /> */}
<Route path="users" element={<Users/>} />
<Route path="tasks" element={<Tasks />} />
<Route path="transactions" element={<Transactions />} />
{user.hasFeature("installer") &&
<Route path="cableEstimate" element={<BinCableEstimator />} />
}
{user.hasFeature("developer") &&
<Route path="api" element={<APIDocs />} />
}
{user.hasFeature("admin") &&
<Route path="logs" element={<Logs />} />
}
<Route path="fields" element={<Fields />} />
<Route path="marketplace" element={<Marketplace />} />
{user.hasFeature("admin") && (
<Route path="firmware" element={<Firmware />} />
)}
<Route path="nfc" element={<Nfc />} />
{/* Map pages */}
<Route path="visualFarm" element={<FieldMap />} />
<Route path="aviationMap" element={<AviationMap />} />
<Route path="constructionMap" element={<ConstructionSiteMap />} />
{/* <Box sx={{ height: "100%", minHeight: "200px" }}> */}
<Suspense fallback={<LoadingScreen message="Loading Page"/>}>
<Routes>
{/* Redirects */}
<Route path="/callback" element={<Navigate to="/" />} />
{/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
{/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
<Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />
{/* Page routes */}
{/* <Route index element={<Typography>Hello!</Typography>} /> */}
<Route path="users" element={<Users/>} />
<Route path="tasks" element={<Tasks />} />
<Route path="transactions" element={<Transactions />} />
{user.hasFeature("installer") &&
<Route path="cableEstimate" element={<BinCableEstimator />} />
}
{user.hasFeature("developer") &&
<Route path="api" element={<APIDocs />} />
}
{user.hasFeature("admin") &&
<Route path="logs" element={<Logs />} />
}
<Route path="fields" element={<Fields />} />
<Route path="marketplace" element={<Marketplace />} />
{user.hasFeature("admin") && (
<Route path="firmware" element={<Firmware />} />
)}
<Route path="nfc" element={<Nfc />} />
{/* Map pages */}
<Route path="visualFarm" element={<FieldMap />} />
<Route path="aviationMap" element={<AviationMap />} />
<Route path="constructionMap" element={<ConstructionSiteMap />} />
<Route path="/logout" element={<Logout />} />
<Route path="grainbags/:bagID" element={<GrainBag />} />
{/*
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Route path="*" element={<RelativeRoutes/>} />
</ErrorBoundary> */}
<Route path="/logout" element={<Logout />} />
<Route path="grainbags/:bagID" element={<GrainBag />} />
{/*
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Route path="*" element={<RelativeRoutes/>} />
</ErrorBoundary> */}
<Route path="*" element={<RelativeRoutes/>} />
</Routes>
</Suspense>
</Routes>
</Suspense>
{/* </Box> */}
</BrowserRouter>
)
}