added loading detection

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, CircularProgress, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -41,6 +41,7 @@ export default function Devices() {
   const location = useLocation();
   const deviceAPI = useDeviceAPI();
   const groupAPI = useGroupAPI();
+  const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
   const [order, ] = useState<"asc" | "desc">("asc");
@@ -50,6 +51,7 @@ export default function Devices() {
   const [devices, setDevices] = useState<pond.Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
+  const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([])
   const [groupLimit, ] = useState(10);
   const [groupPage, ] = useState(0);
@@ -90,6 +92,7 @@ export default function Devices() {
   };
 
   const loadGroups = () => {
+    setGroupsLoading(true)
     groupAPI.listGroups(
       groupLimit,
       groupPage*groupLimit, 
@@ -104,6 +107,8 @@ export default function Devices() {
       })
       setGroups(newGroups)
       setTotalGroups(resp.data.total)
+    }).finally(() => {
+      setGroupsLoading(false)
     })
   }
 
@@ -112,6 +117,7 @@ export default function Devices() {
   }, [groups])
 
   const loadDevices = () => {
+    setDevicesLoading(true)
     deviceAPI.list(
       limit, 
       page*limit, 
@@ -129,6 +135,8 @@ export default function Devices() {
     ).then(resp => {
       setDevices(resp.data.devices)
       setTotal(resp.data.total)
+    }).finally(() => {
+      setDevicesLoading(false)
     })
   }
 
@@ -256,6 +264,7 @@ export default function Devices() {
             <Tab value={group.id()} label={group.name()} key={"group-tab-"+index}/>
           )
         })}
+        {groupsLoading && <CircularProgress />}
         <Tab value={"never"} label={groupButton()} />
       </Tabs>
       <ResponsiveTable<pond.Device>
@@ -270,6 +279,7 @@ export default function Devices() {
         handleRowsPerPageChange={handleChange}
         onRowClick={toDevice}
         setSearchText={setSearch}
+        isLoading={devicesLoading}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}