First working POC

src/lib/composables/useServerReachabilityReload.ts

@@ -0,0 +1,52 @@
+import { isServerReachable } from "$lib/stores/connectivity";
+
+/**
+ * Composable for reloading data when server becomes reachable
+ *
+ * Handles the cache-first timing issue where local cached data is shown,
+ * but we want to refresh from the server when it becomes available again.
+ *
+ * @req: UR-031 - Function offline on cached data
+ * @req: DR-012 - Local database for media metadata cache
+ *
+ * @param reloadFn - Async function to call when server becomes reachable
+ * @returns Object with markLoaded function to indicate initial load is complete
+ *
+ * @example
+ * ```ts
+ * const { markLoaded } = useServerReachabilityReload(async () => {
+ *   await loadData();
+ * });
+ *
+ * onMount(async () => {
+ *   await loadData();
+ *   markLoaded();
+ * });
+ * ```
+ */
+export function useServerReachabilityReload(reloadFn: () => void | Promise<void>) {
+  let hasLoadedOnce = $state(false);
+  let previousServerReachable = $state(false);
+
+  // Watch for server becoming reachable after initial load
+  $effect(() => {
+    const serverReachable = $isServerReachable;
+
+    if (serverReachable && !previousServerReachable && hasLoadedOnce) {
+      // Server just became reachable and we've done an initial load
+      // Trigger reload to get fresh data
+      reloadFn();
+    }
+
+    previousServerReachable = serverReachable;
+  });
+
+  return {
+    /**
+     * Call this after initial data load to enable server reconnection tracking
+     */
+    markLoaded: () => {
+      hasLoadedOnce = true;
+    },
+  };
+}