fix(devices): show empty state instead of spinner when filtered results are empty

frontend/src/components/LoadMore/LoadMore.tsx

@@ -2,24 +2,37 @@ import React from 'react'
 import { Dispatch, State } from '../../store'
 import { selectDeviceModelAttributes } from '../../selectors/devices'
 import { useDispatch, useSelector } from 'react-redux'
-import { makeStyles } from '@mui/styles'
-import { Box, Button } from '@mui/material'
-import { spacing } from '../../styling'
+import { Box, Button, Typography } from '@mui/material'
 
 export const LoadMore: React.FC = () => {
   const { from, size, total, results, searched, fetching } = useSelector((state: State) =>
     selectDeviceModelAttributes(state)
   )
   const dispatch = useDispatch<Dispatch>()
-  const css = useStyles()
 
   const pages = Math.ceil((searched ? results : total) / size)
   const nextPage = Math.floor(from / size) + 1
 
+  const count = searched ? results : total
+  const showing = Math.min(from + size, count)
+
   if (nextPage >= pages) return null
 
   return (
-    <Box className={css.box}>
+    <Box
+      sx={{
+        position: 'absolute',
+        display: 'flex',
+        // justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 3,
+        paddingBottom: 4.5,
+        height: 100,
+        marginLeft: 4.5,
+        marginTop: 4.5,
+        gap: 4,
+      }}
+    >
       <Button
         color="primary"
         disabled={fetching}
@@ -30,21 +43,9 @@ export const LoadMore: React.FC = () => {
       >
         {fetching ? `Loading ${from} - ${from + size}...` : 'Load More'}
       </Button>
+      <Typography variant="subtitle2" color="GrayText">
+        {showing.toLocaleString()} of {count.toLocaleString()}
+      </Typography>
     </Box>
   )
 }
-
-const useStyles = makeStyles({
-  box: {
-    position: 'absolute',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    padding: spacing.lg,
-    paddingBottom: spacing.xl,
-    height: 100,
-    marginLeft: spacing.xl,
-    marginTop: spacing.xl,
-  },
-})

frontend/src/pages/DevicesPage.tsx

@@ -41,7 +41,7 @@ export const DevicesPage: React.FC<Props> = ({ restore, select }) => {
     <DevicesDrawers>
       <RegisterMenu buttonSize={56} fontSize={22} fab />
       <DevicesHeader select={select} devices={devices}>
-        {(fetching || shouldRedirect) && !devices.length ? (
+        {(!initialized || fetching || shouldRedirect) && !devices.length ? (
           <LoadingMessage />
         ) : !devices.length ? (
           <DeviceListEmpty />

frontend/src/services/CloudSync.ts

@@ -1,5 +1,6 @@
 import network from './Network'
-import { dispatch } from '../store'
+import { store, dispatch } from '../store'
+import { selectDeviceModelAttributes } from '../selectors/devices'
 
 class CloudSync {
   initialized = false
@@ -56,7 +57,15 @@ class CloudSync {
   all = async () => {
     console.log('CLOUD SYNC ALL')
     await this.core()
-    await dispatch.devices.set({ from: 0 })
+    // Preserve pagination: re-fetch all loaded devices instead of resetting to first page
+    const state = store.getState()
+    const deviceModel = selectDeviceModelAttributes(state)
+    const loadedCount = deviceModel.from + deviceModel.size
+    if (loadedCount > deviceModel.size) {
+      await dispatch.devices.set({ from: 0, size: loadedCount })
+    } else {
+      await dispatch.devices.set({ from: 0 })
+    }
     await this.call([
       dispatch.files.fetch,
       dispatch.jobs.fetch,
@@ -67,6 +76,10 @@ class CloudSync {
       dispatch.products.fetch,
       dispatch.partnerStats.fetch,
     ])
+    // Restore original pagination position after refresh
+    if (loadedCount > deviceModel.size) {
+      await dispatch.devices.set({ from: deviceModel.from, size: deviceModel.size })
+    }
   }
 }