diff --git a/app/page.tsx b/app/page.tsx
index 3b0f3a8..71005da 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { OrderItem } from '@/lib/types';
 import { useAuth } from '@/components/AuthProvider';
@@ -100,6 +100,21 @@ export default function CollectionsPage() {
   // collapsed independently of the supplier they're inside.
   const [expandedPOs, setExpandedPOs] = useState<Set<string>>(new Set());
 
+  // Mirror items.length into a ref so loadItems can decide whether to
+  // flash the loading skeleton WITHOUT making items.length a callback
+  // dependency. If items.length WERE a dep, every successful collect
+  // (which filters the collected item out of state) would rebuild
+  // loadItems, the auto-fire useEffect below would re-run loadItems,
+  // and the setExpandedSuppliers(new Set()) call inside it would
+  // collapse the supplier the driver is currently working through —
+  // forcing them to re-expand for every single item. The ref lets us
+  // keep the "don't flash a skeleton when items are already on screen"
+  // behavior while breaking the collapse loop.
+  const itemsLengthRef = useRef(0);
+  useEffect(() => {
+    itemsLengthRef.current = items.length;
+  }, [items.length]);
+
   useEffect(() => {
     if (!authLoading && !isLoggedIn) router.push('/login/');
   }, [isLoggedIn, authLoading, router]);
@@ -116,9 +131,10 @@ export default function CollectionsPage() {
 const loadItems = useCallback(async (showLoading = true) => {
     if (!isAuthenticated()) return;
     // Only show the loading skeleton when we genuinely have nothing
-    // to render. If cached data is on screen, the re-fetch happens
-    // silently and the user sees fresh data appear without a flash.
-    if (showLoading && items.length === 0) setIsLoading(true);
+    // to render. Read items.length from the ref so this stays a
+    // current-value check, not a subscription — see the comment on
+    // itemsLengthRef above for why.
+    if (showLoading && itemsLengthRef.current === 0) setIsLoading(true);
     setError('');
     try {
       let data: OrderItem[] = [];
@@ -162,7 +178,7 @@ const loadItems = useCallback(async (showLoading = true) => {
       setIsLoading(false);
       setIsRefreshing(false);
     }
-  }, [statusFilter, items.length]);
+  }, [statusFilter]);
 
   useEffect(() => { loadItems(); }, [loadItems]);