feat(ui): Loading animation cleanup

Hypfer · May 28, 2024 · d8714dd · d8714dd
1 parent 31519e1
commit d8714dd
Show file tree

Hide file tree

Showing 21 changed files with 1,752 additions and 1,660 deletions.
diff --git a/frontend/src/CapabilitiesProvider.tsx b/frontend/src/CapabilitiesProvider.tsx
@@ -1,18 +1,9 @@
-import {Backdrop, Button, styled, Typography,} from "@mui/material";
+import {Button} from "@mui/material";
 import {SnackbarKey, useSnackbar} from "notistack";
 import React from "react";
 import {Capability, useCapabilitiesQuery} from "./api";
 import ValetudoSplash from "./components/ValetudoSplash";
 
-const StyledBackdrop = styled(Backdrop)(({theme}) => {
-    return {
-        zIndex: theme.zIndex.drawer + 1,
-        color: "#fff",
-        display: "flex",
-        flexFlow: "column",
-    };
-});
-
 const Context = React.createContext<Capability[]>([]);
 
 const CapabilitiesProvider = (props: {
@@ -71,16 +62,10 @@ const CapabilitiesProvider = (props: {
 
     return (
         <Context.Provider value={capabilities ?? []}>
-            <StyledBackdrop
-                open={capabilitiesPending}
-                style={{
-                    transitionDelay: capabilitiesPending ? "800ms" : "0ms",
-                }}
-                unmountOnExit
-            >
+            {
+                capabilitiesPending &&
                 <ValetudoSplash/>
-                <Typography variant="caption">Loading capabilities...</Typography>
-            </StyledBackdrop>
+            }
             {
                 capabilities &&
                 children

diff --git a/frontend/src/ProvisioningPage.tsx b/frontend/src/ProvisioningPage.tsx
@@ -17,6 +17,7 @@ import {
     ListItemIcon,
     ListItemText,
     Paper,
+    Skeleton,
     TextField,
     Typography
 } from "@mui/material";
@@ -40,7 +41,6 @@ import {
     useWifiConfigurationMutation,
     useWifiScanQuery,
 } from "./api";
-import LoadingFade from "./components/LoadingFade";
 import {LoadingButton} from "@mui/lab";
 import {useCapabilitiesSupported} from "./CapabilitiesProvider";
 
@@ -219,7 +219,7 @@ const ProvisioningPage = (): React.ReactElement => {
     const robotInformationElement = React.useMemo(() => {
         if (robotInformationPending || versionPending) {
             return (
-                <LoadingFade/>
+                <Skeleton height={"6rem"}/>
             );
         }
 

diff --git a/frontend/src/components/list_menu/SelectListMenuItem.tsx b/frontend/src/components/list_menu/SelectListMenuItem.tsx
@@ -1,6 +1,14 @@
 import React from "react";
-import {Avatar, ListItem, ListItemAvatar, ListItemText, MenuItem, Select, Typography} from "@mui/material";
-import LoadingFade from "../LoadingFade";
+import {
+    Avatar,
+    CircularProgress,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    MenuItem,
+    Select,
+    Typography
+} from "@mui/material";
 
 export type SelectListMenuItemOption = {
     value: string,
@@ -31,7 +39,7 @@ export const SelectListMenuItem: React.FunctionComponent<{
     let select;
 
     if (loadingOptions) {
-        select = <LoadingFade/>;
+        select = <CircularProgress/>;
     } else if (loadError) {
         select = <Typography variant="body2" color="error">Error</Typography>;
     } else {

diff --git a/frontend/src/controls/PresetSelection.tsx b/frontend/src/controls/PresetSelection.tsx
@@ -1,4 +1,14 @@
-import {Box, CircularProgress, Grid, Icon, Paper, Slider, sliderClasses, styled, Typography,} from "@mui/material";
+import {
+    Box,
+    Grid,
+    Icon,
+    Paper,
+    Skeleton,
+    Slider,
+    sliderClasses,
+    styled,
+    Typography,
+} from "@mui/material";
 import {Mark} from "@mui/base";
 import React from "react";
 import {
@@ -102,7 +112,7 @@ const PresetSelectionControl = (props: PresetSelectionProps): React.ReactElement
         if (presetsPending) {
             return (
                 <Grid item>
-                    <CircularProgress size={20} />
+                    <Skeleton height={"3rem"} />
                 </Grid>
             );
         }

diff --git a/frontend/src/hooks/useCommittingSlider.ts b/frontend/src/hooks/useCommittingSlider.ts
@@ -22,7 +22,7 @@ export const useCommittingSlider = (initialValue: number, onChange: (value: numb
 
             setResetTimeout(setTimeout(() => {
                 setSliderValue(initialValue);
-            }, 1000));
+            }, 2000));
         }
     }, [sliderValue, initialValue, adoptedValue, getResetTimeout]);
 

diff --git a/frontend/src/options/OptionsRouter.tsx b/frontend/src/options/OptionsRouter.tsx
@@ -4,18 +4,18 @@ import MapManagement from "./MapManagement";
 import EditMapPage from "../map/EditMapPage";
 import {useCapabilitiesSupported} from "../CapabilitiesProvider";
 import {Capability} from "../api";
-import MQTTConnectivity from "./connectivity/MQTTConnectivity";
 import ConnectivityOptions from "./connectivity/ConnectivityOptions";
-import NTPConnectivity from "./connectivity/NTPConnectivity";
-import AuthSettings from "./connectivity/AuthSettings";
-import WifiConnectivity from "./connectivity/WifiConnectivity";
-import NetworkAdvertisementSettings from "./connectivity/NetworkAdvertisementSettings";
+import NTPConnectivityPage from "./connectivity/NTPConnectivityPage";
+import AuthSettingsPage from "./connectivity/AuthSettingsPage";
+import WifiConnectivityPage from "./connectivity/WifiConnectivityPage";
+import NetworkAdvertisementSettingsPage from "./connectivity/NetworkAdvertisementSettingsPage";
 import RobotCoverageMapPage from "../map/RobotCoverageMapPage";
 import ValetudoOptions from "./ValetudoOptions";
 import React from "react";
 import RobotOptions from "../robot/RobotOptions";
 import MiscRobotOptions from "../robot/capabilities/MiscRobotOptions";
 import Quirks from "../robot/capabilities/Quirks";
+import MQTTConnectivityPage from "./connectivity/MQTTConnectivityPage";
 
 const OptionsRouter = (): React.ReactElement => {
     const {path} = useRouteMatch();
@@ -70,21 +70,21 @@ const OptionsRouter = (): React.ReactElement => {
                 <ConnectivityOptions/>
             </Route>
             <Route exact path={path + "/connectivity/auth"}>
-                <AuthSettings/>
+                <AuthSettingsPage/>
             </Route>
             <Route exact path={path + "/connectivity/mqtt"}>
-                <MQTTConnectivity/>
+                <MQTTConnectivityPage/>
             </Route>
             <Route exact path={path + "/connectivity/networkadvertisement"}>
-                <NetworkAdvertisementSettings/>
+                <NetworkAdvertisementSettingsPage/>
             </Route>
             <Route exact path={path + "/connectivity/ntp"}>
-                <NTPConnectivity/>
+                <NTPConnectivityPage/>
             </Route>
             {
                 wifiConfigurationCapabilitySupported &&
                 <Route exact path={path + "/connectivity/wifi"}>
-                    <WifiConnectivity/>
+                    <WifiConnectivityPage/>
                 </Route>
             }
 

diff --git a/frontend/src/options/connectivity/AuthSettings.tsx b/frontend/src/options/connectivity/AuthSettings.tsx