instance sort

bun.lock

···
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
         "date-fns": "^4.1.0",
+        "lodash": "^4.17.21",
         "numeral": "^2.0.6",
         "tailwindcss": "^4.1.16",
       },
···
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
 
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
+
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 

package.json

···
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
     "date-fns": "^4.1.0",
+    "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "tailwindcss": "^4.1.16"
   }

src/App.svelte

···
   import { onMount } from 'svelte';
   import { formatDistanceToNow, addSeconds, formatDate, formatISO9075 } from 'date-fns';
   import { Progress, Switch } from '@skeletonlabs/skeleton-svelte';
+  import orderBy from "lodash/orderBy";
   import instancesData from './instances.json';
   import numeral from 'numeral';
   
···
   let canRefresh = $state(true)
   let lastUpdated = $state(new Date())
   let autoRefreshEnabled = $state(true)
-  let instances = $state(instancesData)
-  let instancesSorted = $derived(instances.sort((a, b) => a.status?.responseTime > b.status?.responseTime ? 1 : -1))
+  let instances = $state(instancesData.sort(() => Math.random() - 0.5))
+
+  const instanceOrderBy = [['status.head', 'status.latency'], ['desc', 'asc']]
 
   function formatNumber(n: number) {
     return numeral(n).format()
···
       }
     }
     if (statusResp) {
-      statusResp.responseTime = performance.now() - start;
+      statusResp.latency = performance.now() - start;
     }
     return statusResp
   }
···
     await Promise.all(instances.map(async (instance) => {
       const status = await getStatus(instance)
 
-      if (status?.bundles?.last_bundle > lastKnownBundle.number) {
+      instance.status = status
+      instance.status.head = status?.bundles?.last_bundle > lastKnownBundle.number
+      if (instance.status.head) {
         lastKnownBundle.number = status?.bundles?.last_bundle
         lastKnownBundle.hash = status?.bundles?.head_hash
         lastKnownBundle.time = status?.bundles?.end_time
···
           lastKnownBundle.etaNext = addSeconds(new Date(), status?.mempool?.eta_next_bundle_seconds)
         }
       }
-      instance.status = status
       lastUpdated = new Date()
     }))
     isUpdating = false
···
         </tr>
       </thead>
       <tbody>
-        {#each instances as instance}
+        {#each orderBy(instances, ...instanceOrderBy) as instance}
           <tr>
             <td><a href={instance.url} target="_blank" class="font-semibold">{instance.url.replace("https://", "")}</a></td>
             <td>{#if instance.status?.bundles?.last_bundle === lastKnownBundle.number}✅{:else if instance.status}🔄{:else}⌛{/if}</td>
···
             <td><span class="font-mono text-xs">{#if instance.status?.bundles?.head_hash}{instance.status?.bundles?.head_hash.slice(0, 7)}{/if}</span></td>
             <td><span class="font-mono text-xs">{#if instance.status?.bundles?.root_hash}{instance.status?.bundles?.root_hash.slice(0, 7)}{/if}</span></td>
             <td>{#if instance.status?.server?.version}{instance.status?.server?.version}{/if}</td>
-            <td class="opacity-50">{#if instance.status?.responseTime}{Math.round(instance.status?.responseTime)}ms{/if}</td>
+            <td class="opacity-50">{#if instance.status?.latency}{Math.round(instance.status?.latency)}ms{/if}</td>
           </tr>
         {/each}
       </tbody>