fix in ui for a refresh

apps/main/src/lib/domains/mobile/mobile.remote.ts

@@ -15,6 +15,7 @@ const mc = getMobileController();
 
 const getDevicesInputSchema = v.object({
     search: v.optional(v.string()),
+    refreshAt: v.optional(v.number()),
     pagination: mobilePaginationSchema,
 });
 

apps/main/src/lib/domains/mobile/mobile.vm.svelte.ts

@@ -37,12 +37,24 @@ class MobileViewModel {
 
     private devicesPollTimer: ReturnType<typeof setInterval> | null = null;
     private smsPollTimer: ReturnType<typeof setInterval> | null = null;
+    private devicesRequestVersion = 0;
 
-    async fetchDevices() {
+    async fetchDevices({
+        showLoading = true,
+        forceRefresh = false,
+    }: {
+        showLoading?: boolean;
+        forceRefresh?: boolean;
+    } = {}) {
+        const requestVersion = ++this.devicesRequestVersion;
+        if (showLoading) {
             this.devicesLoading = true;
+        }
+
         try {
             const result = await getDevicesSQ({
                 search: this.devicesSearch || undefined,
+                refreshAt: forceRefresh ? Date.now() : undefined,
                 pagination: {
                     page: this.devicesPage,
                     pageSize: this.devicesPageSize,
@@ -51,6 +63,10 @@ class MobileViewModel {
                 },
             });
 
+            if (requestVersion !== this.devicesRequestVersion) {
+                return;
+            }
+
             if (result?.error || !result?.data) {
                 toast.error(result?.error?.message || "Failed to load devices", {
                     description: result?.error?.description || "Please try again later",
@@ -58,17 +74,27 @@ class MobileViewModel {
                 return;
             }
 
-            this.devices = result.data.data as MobileDevice[];
+            this.devices = [...(result.data.data as MobileDevice[])];
             this.devicesTotal = result.data.total;
         } catch (error) {
+            if (requestVersion !== this.devicesRequestVersion) {
+                return;
+            }
+
             toast.error("Failed to load devices", {
                 description:
                     error instanceof Error ? error.message : "Please try again later",
             });
         } finally {
+            if (showLoading && requestVersion === this.devicesRequestVersion) {
                 this.devicesLoading = false;
             }
         }
+    }
+
+    async refreshDevices() {
+        await this.fetchDevices({ showLoading: true, forceRefresh: true });
+    }
 
     async fetchDeviceDetail(deviceId: number) {
         this.deviceDetailLoading = true;
@@ -154,7 +180,10 @@ class MobileViewModel {
     startDevicesPolling(intervalMs = 5000) {
         this.stopDevicesPolling();
         this.devicesPollTimer = setInterval(() => {
-            this.fetchDevices();
+            void this.fetchDevices({
+                showLoading: false,
+                forceRefresh: true,
+            });
         }, intervalMs);
     }
 

apps/main/src/routes/(main)/dashboard/+page.svelte

@@ -17,7 +17,7 @@
     breadcrumbs.set([mainNavTree[0]]);
 
     onMount(async () => {
-        await mobileVM.fetchDevices();
+        await mobileVM.refreshDevices();
         mobileVM.startDevicesPolling(5000);
     });
 
@@ -40,7 +40,7 @@
                 <Button
                     variant="outline"
                     size="sm"
-                    onclick={() => mobileVM.fetchDevices()}
+                    onclick={() => void mobileVM.refreshDevices()}
                     disabled={mobileVM.devicesLoading}
                 >
                     <Icon
@@ -62,7 +62,7 @@
                     bind:value={mobileVM.devicesSearch}
                     oninput={() => {
                         mobileVM.devicesPage = 1;
-                        mobileVM.fetchDevices();
+                        void mobileVM.refreshDevices();
                     }}
                 />
             </div>

apps/main/src/routes/(main)/users/+page.svelte

@@ -64,8 +64,8 @@
             </div>
 
             <div class="grid place-items-center p-8 py-32">
-                <span class="text-xl font-semibold"
+                <span class="text-xl font-semibold">
-                    >INFO: Normally would show all the users table here
+                    Not Active At The Moment
                 </span>
             </div>
         </Card.Content>