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

[JamieRuderman]

Summary

• Fix empty state spinner: Show empty state instead of infinite spinner when filtered device results are empty
• Fix device list pagination reset: When cloudSync.all() fires (network reconnect, wake-from-sleep, window refocus), it was resetting from: 0 and only re-fetching the first 50 devices — discarding all "Load More" progress. Now it re-fetches all previously loaded pages in one request and restores the pagination position afterward.
• Show row count on Load More: Display "X of Y" next to the Load More button so users always know how many devices are currently shown vs total

Details

Pagination preservation (CloudSync.ts)

The root cause of the user complaint ("I click Load More several times, edit a device, go back, and I'm back to the first 50") was cloudSync.all() unconditionally setting from: 0. This gets triggered by network reconnect/sleep/focus events — not the save itself, but the time spent editing gives these events a chance to fire.

The fix reads the current pagination state before the sync, temporarily sets size to cover all loaded devices (from + size), fetches them in one request, then restores the original from/size values.

Row count (LoadMore.tsx)

Added a "X of Y" label next to the Load More button. Also migrated from deprecated makeStyles to sx prop.

Test plan

• Load the device list, click "Load More" several times
• Verify "X of Y" count displays next to the button
• Navigate into a device, edit and save, navigate back — verify pagination position is preserved
• Trigger a cloud sync (e.g., disconnect/reconnect network) — verify loaded devices are not lost
• Verify filtered/searched results still show correct counts

[aws-amplify-us-west-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1065.d20k671nqqv4kl.amplifyapp.com