fix(directory-picker-browse): resolve quiet-navigation review

packages/host/directory-picker-browse/src/client/DirectoryBrowser.module.css

@@ -242,6 +242,10 @@
 .status,
 .error {
   padding: 4px;
+  /* The loading pill occupies the opposite corner while a stale status stays
+   * visible. Reserve its widest localized footprint so wrapped text cannot
+   * run underneath it on a narrow card. */
+  padding-right: 120px;
   font-size: 12px;
   line-height: 18px;
 }
@@ -259,15 +263,15 @@
  * the columns' height, and the stale view keeps rendering beneath it (it
  * only appears at all once a scan outlives SLOW_SCAN_DELAY_MS). Right,
  * not left: the truncated/error status rows flow at the bottom LEFT and
- * stay on screen through a scan, so the opposite corner keeps both
- * legible. After .status in the cascade — the element carries both
- * classes and this padding must win the same-specificity race. */
+ * stay on screen through a scan, with their reserved right padding keeping
+ * both legible even on a narrow card. After .status in the cascade — the
+ * element carries both classes and this padding must win the
+ * same-specificity race. */
 .loadingFloat {
   position: absolute;
   right: 16px;
   bottom: 8px;
   padding: 2px 8px;
-  border-radius: 6px;
   background: var(--dsw-alias-bg-layer-2);
 }
 

packages/host/directory-picker-browse/src/client/DirectoryBrowser.tsx

@@ -186,10 +186,14 @@ export function DirectoryBrowser({ open, listDirectory, createDirectory, onOpen,
   const [selected, setSelected] = useState<DirectoryEntry | null>(null)
   const [child, setChild] = useState<DirectoryListing | null>(null)
   const [loading, setLoading] = useState(false)
-  // Derived from `loading` by the slow-scan effect below: true only once a
-  // scan has been in flight for SLOW_SCAN_DELAY_MS, so fast listings never
-  // render the indicator at all.
+  // Derived from `loading` and `scanWindow` by the slow-scan effect below:
+  // true only once the current listing call has been in flight for
+  // SLOW_SCAN_DELAY_MS, so fast listings never render the indicator at all.
   const [slowScan, setSlowScan] = useState(false)
+  // Every listing call owns a fresh silence window. `loading` may stay true
+  // across a superseding row pick or across a navigation's target and parent
+  // legs, so its boolean edge cannot identify the start of each scan.
+  const [scanWindow, setScanWindow] = useState(0)
   const [error, setError] = useState<string | null>(null)
   // Path-edit state: null = breadcrumb mode; a string = the draft being typed.
   const [pathDraft, setPathDraft] = useState<string | null>(null)
@@ -233,13 +237,20 @@ export function DirectoryBrowser({ open, listDirectory, createDirectory, onOpen,
     return ++requestSeq.current
   }, [])
 
+  /** Hide any prior indicator and start a fresh silence window for one listing call. */
+  const restartSlowScanWindow = useCallback((): void => {
+    setSlowScan(false)
+    setScanWindow(value => value + 1)
+  }, [])
+
   /** Launch one listing under a fresh controller so a later supersession can abort it. */
   const launchListing = useCallback((path: string | undefined): { seq: number; scan: Promise<DirectoryListing> } => {
     const seq = supersede()
     const controller = new AbortController()
     scanController.current = controller
+    restartSlowScanWindow()
     return { seq, scan: listDirectory(path, controller.signal) }
-  }, [supersede, listDirectory])
+  }, [supersede, restartSlowScanWindow, listDirectory])
 
   /**
    * Launch a follow-up listing under the CURRENT supersession seq: a newer
@@ -248,8 +259,9 @@ export function DirectoryBrowser({ open, listDirectory, createDirectory, onOpen,
   const continueScan = useCallback((path: string): Promise<DirectoryListing> => {
     const controller = new AbortController()
     scanController.current = controller
+    restartSlowScanWindow()
     return listDirectory(path, controller.signal)
-  }, [listDirectory])
+  }, [restartSlowScanWindow, listDirectory])
 
   /**
    * Replace the whole view with a freshly navigated level. Away from the
@@ -474,9 +486,10 @@ export function DirectoryBrowser({ open, listDirectory, createDirectory, onOpen,
     })
   }
 
-  // The slow-scan gate for the loading indicator: arm a timer when a scan
-  // starts, retire it (and the indicator) the moment loading ends. A settle
-  // inside the window means the swap happened with nothing shown.
+  // The slow-scan gate for the loading indicator: each listing call restarts
+  // the timer even when a superseding scan or a navigation's parent leg keeps
+  // `loading` continuously true. A settle inside its own window means the swap
+  // happened with nothing shown.
   useEffect(() => {
     if (!loading) {
       setSlowScan(false)
@@ -484,7 +497,7 @@ export function DirectoryBrowser({ open, listDirectory, createDirectory, onOpen,
     }
     const timer = window.setTimeout(() => { setSlowScan(true) }, SLOW_SCAN_DELAY_MS)
     return () => { window.clearTimeout(timer) }
-  }, [loading])
+  }, [loading, scanWindow])
 
   // After the hooks: a closed dialog renders nothing and evaluates no copy.
   const crumbSource = child ?? parent