feat: mo.ui.file_browser show spinner when listing is slow (#7155)

## 📝 Summary
Adds a spinner to `mo.ui.file_browser` if listing files takes more than
200ms.

## 🔍 Description of Changes

I was using `mo.ui.file_browser` with S3, browsing a medium size
directory and the initial load takes something like 20 seconds without
any indication for what's happening. Felt a bit broken so this changes
that.

The delay is there to avoid flashing the spinner when listing is quick.

Here's a demo with the change:


https://github.com/user-attachments/assets/b68722e9-d157-4342-befc-090f5b367d4a

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

I have read the CLA Document and I hereby sign the CLA.

Author: enosh

frontend/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,13 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { CornerLeftUp } from "lucide-react";
-import { type JSX, useState } from "react";
+import { type JSX, useEffect, useState } from "react";
 import { z } from "zod";
 import {
   FILE_TYPE_ICONS,
   type FileType,
   guessFileType,
 } from "@/components/editor/file-tree/types";
+import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -145,6 +146,7 @@ export const FileBrowser = ({
   const [path, setPath] = useInternalStateWithSync(initialPath);
   const [selectAllLabel, setSelectAllLabel] = useState("Select all");
   const [isUpdatingPath, setIsUpdatingPath] = useState(false);
+  const [showLoadingOverlay, setShowLoadingOverlay] = useState(false);
 
   // HACK: use the random-id of the host element to force a re-render
   // when the random-id changes, this means the cell was re-rendered
@@ -153,10 +155,22 @@ export const FileBrowser = ({
   const { data, error, isPending } = useAsyncData(() => {
     return list_directory({ path: path });
   }, [path, randomId]);
+  const spinnerLabel = "Listing files...";
 
-  if (isPending) {
-    return null;
-  }
+  useEffect(() => {
+    if (!isPending) {
+      setShowLoadingOverlay(false);
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      setShowLoadingOverlay(true);
+    }, 200);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [isPending]);
 
   if (!data && error) {
     return <Banner kind="danger">{error.message}</Banner>;
@@ -459,9 +473,20 @@ export const FileBrowser = ({
       )}
 
       <div
-        className="mt-3 overflow-y-auto w-full border"
+        className="mt-3 overflow-y-auto w-full border relative"
         style={{ height: "14rem" }}
+        aria-busy={isPending}
+        aria-live="polite"
       >
+        {showLoadingOverlay && (
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/80 text-xs text-muted-foreground pointer-events-none z-10"
+            role="status"
+          >
+            <Spinner size="small" />
+            <span>{spinnerLabel}</span>
+          </div>
+        )}
         <Table className="cursor-pointer table-fixed">
           <TableBody>{fileRows}</TableBody>
         </Table>