`afterFill()` - add loading progress (#5288)

packages/@uppy/provider-views/src/Browser.tsx

@@ -64,7 +64,7 @@ function Browser<M extends Meta, B extends Body>(props: BrowserProps<M, B>) {
   if (isLoading) {
     return (
       <div className="uppy-Provider-loading">
-        <span>{i18n('loading')}</span>
+        {typeof isLoading === 'string' ? isLoading : i18n('loading')}
       </div>
     )
   }

packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx

@@ -339,6 +339,11 @@ export default class ProviderView<M extends Meta, B extends Body> {
         partialTree,
         (path: PartialTreeId) => this.provider.list(path, { signal }),
         this.validateSingleFile,
+        (n) => {
+          this.setLoading(
+            this.plugin.uppy.i18n('addedNumFiles', { numFiles: n }),
+          )
+        },
       )
 
       // 2. Now that we know how many files there are - recheck aggregateRestrictions!

packages/@uppy/provider-views/src/utils/PartialTreeUtils/afterFill.ts

@@ -75,6 +75,7 @@ const afterFill = async (
   partialTree: PartialTree,
   apiList: ApiList,
   validateSingleFile: (file: CompanionFile) => string | null,
+  reportProgress: (n: number) => void,
 ): Promise<PartialTree> => {
   const queue = new PQueue({ concurrency: 6 })
 
@@ -87,7 +88,7 @@ const afterFill = async (
       // either "not yet cached at all" or "some pages are left to fetch"
       (item.cached === false || item.nextPagePath),
   ) as PartialTreeFolderNode[]
-  // per each poor folder, recursively fetch all files and make them .checked!!!
+  // per each poor folder, recursively fetch all files and make them .checked!
   poorFolders.forEach((poorFolder) => {
     queue.add(() =>
       recursivelyFetch(
@@ -100,6 +101,13 @@ const afterFill = async (
     )
   })
 
+  queue.on('completed', () => {
+    const nOfFilesChecked = poorTree.filter(
+      (i) => i.type === 'file' && i.status === 'checked',
+    ).length
+    reportProgress(nOfFilesChecked)
+  })
+
   await queue.onIdle()
 
   return poorTree

packages/@uppy/provider-views/src/utils/PartialTreeUtils/index.test.ts

@@ -79,7 +79,12 @@ describe('afterFill()', () => {
           _file('4', { parentId: 'ourRoot' }),
     ]
     const mock = vi.fn()
-    const enrichedTree = await afterFill(tree, mock, () => null)
+    const enrichedTree = await afterFill(
+      tree,
+      mock,
+      () => null,
+      () => {},
+    )
 
     // While we're at it - make sure we're not doing excessive api calls!
     expect(mock.mock.calls.length).toEqual(0)
@@ -109,7 +114,12 @@ describe('afterFill()', () => {
       }
       return Promise.reject()
     }
-    const enrichedTree = await afterFill(tree, mock, () => null)
+    const enrichedTree = await afterFill(
+      tree,
+      mock,
+      () => null,
+      () => {},
+    )
 
     const checkedFiles = enrichedTree.filter(
       (item) => item.type === 'file' && item.status === 'checked',
@@ -137,7 +147,12 @@ describe('afterFill()', () => {
       }
       return Promise.reject()
     }
-    const enrichedTree = await afterFill(tree, mock, () => null)
+    const enrichedTree = await afterFill(
+      tree,
+      mock,
+      () => null,
+      () => {},
+    )
 
     const checkedFiles = enrichedTree.filter(
       (item) => item.type === 'file' && item.status === 'checked',
@@ -171,7 +186,12 @@ describe('afterFill()', () => {
       }
       return Promise.reject()
     }
-    const enrichedTree = await afterFill(tree, mock, () => null)
+    const enrichedTree = await afterFill(
+      tree,
+      mock,
+      () => null,
+      () => {},
+    )
 
     const checkedFiles = enrichedTree.filter(
       (item) => item.type === 'file' && item.status === 'checked',
@@ -233,7 +253,12 @@ describe('afterFill()', () => {
       }
       return Promise.reject()
     }
-    const enrichedTree = await afterFill(tree, mock, () => null)
+    const enrichedTree = await afterFill(
+      tree,
+      mock,
+      () => null,
+      () => {},
+    )
 
     const checkedFiles = enrichedTree.filter(
       (item) => item.type === 'file' && item.status === 'checked',