fix(react): sort merged source list by name so optimistic adds don't jump

mergePending prepends the pending placeholder while the server's listSources returns in insertion order, so a newly added source appeared at the top during the pending phase and jumped to the bottom once the server confirmed. Sort the merged list by name so the placeholder lands in the same position the canonical row will occupy.

Rhys Sullivan committed 6 months ago

Commit 261c4dd1 parent 96dc18a1 file · +8 −6Browse files

Unified · Split

packages/react/src/api/optimistic.tsx+8−6

 /**
  * Sidebar/list helper. Reads `sourcesAtom(scopeId)` and merges any pending
- * placeholder rows on top so the UI updates instantly when an add form pushes
+ * placeholder rows in, sorting the combined list by name so the placeholder
- * a placeholder.
+ * lands in the same position the canonical row will occupy — no visual jump
+ * when the server confirms.
  */
 export const useSourcesWithPending = (scopeId: ScopeId) => {
   const result = useAtomValue(sourcesAtom(scopeId));
   const { pending } = usePendingResource<PendingSource>(PendingResource.sources);
   return React.useMemo(
     () =>
-      Result.map(result, (sources) =>
+      Result.map(result, (sources) => {
-        mergePending(
+        const merged = mergePending(
           pending,
           sources,
           (s) => s.id,
             canRefresh: false,
             canEdit: false,
           }),
-        ),
+        );
-      ),
+        return [...merged].sort((a, b) => a.name.localeCompare(b.name));
+      }),
     [result, pending],
   );
 };