feat(recents): show progress bar while shared-drive files load

Shared-drive and federated files are fetched from the stack via the dataproxy and arrive after the local files, so the recents list silently grows once it already looks settled. Surface that background fetch with a progress bar under the header once a list is on screen.

Author: rezk2ll

src/modules/views/Recent/index.jsx

@@ -9,6 +9,7 @@ import {
 } from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { Content } from 'cozy-ui/transpiled/react/Layout'
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
 
 import FolderView from '../Folder/FolderView'
 import FolderViewBody from '../Folder/FolderViewBody'
@@ -51,6 +52,11 @@ export const RecentView = () => {
 
   const recentsResult = useRecentFiles()
 
+  // Shared-drive and federated files arrive from the dataproxy seconds after
+  // the local files; surface that background fetch once a list is on screen.
+  const isFetchingMore =
+    recentsResult?.fetchStatus === 'loading' && recentsResult?.data?.length > 0
+
   useKeyboardShortcuts({
     client: base.client,
     items: recentsResult?.data || [],
@@ -103,6 +109,7 @@ export const RecentView = () => {
           <Breadcrumb path={[{ name: base.t('breadcrumb.title_recent') }]} />
           <Toolbar canUpload={false} canCreateFolder={false} />
         </FolderViewHeader>
+        {isFetchingMore && <LinearProgress />}
         {flag('drive.virtualization.enabled') && !base.isMobile ? (
           <FolderViewBodyVz
             actions={actions}

src/modules/views/Recent/index.loading.spec.jsx

@@ -0,0 +1,110 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { useSharingContext } from 'cozy-sharing'
+
+import RecentViewWithProvider from './index'
+import { generateFileFixtures } from '../testUtils'
+import AppLike from 'test/components/AppLike'
+import { setupStoreAndClient } from 'test/setup'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => jest.fn()
+}))
+
+jest.mock('components/pushClient', () => ({
+  isMacOS: jest.fn(() => false),
+  isIOS: jest.fn(() => false),
+  isLinux: jest.fn(() => false),
+  isAndroid: jest.fn(() => false)
+}))
+jest.mock('components/pushClient/Banner', () => () => <div>Banner</div>)
+jest.mock('cozy-client/dist/hooks/useQuery', () =>
+  jest.fn(() => ({
+    fetchStatus: '',
+    data: []
+  }))
+)
+jest.mock('cozy-keys-lib', () => ({
+  useVaultClient: jest.fn()
+}))
+jest.mock('components/useHead', () => jest.fn())
+jest.mock('cozy-sharing', () => ({
+  __esModule: true,
+  ...jest.requireActual('cozy-sharing'),
+  useSharingContext: jest.fn()
+}))
+jest.mock('cozy-dataproxy-lib', () => ({
+  useDataProxy: jest.fn(() => ({ dataProxyServicesAvailable: false }))
+}))
+jest.mock('@/hooks/useRecentFiles', () => ({
+  __esModule: true,
+  default: jest.fn()
+}))
+
+const mockUseRecentFiles = require('@/hooks/useRecentFiles').default
+
+useSharingContext.mockReturnValue({ byDocId: [] })
+
+const renderRecentView = recentsResult => {
+  const { store, client } = setupStoreAndClient()
+  client.plugins.realtime = { subscribe: jest.fn(), unsubscribe: jest.fn() }
+  client.query = jest.fn().mockReturnValue({ data: [] })
+  client.stackClient.fetchJSON = jest
+    .fn()
+    .mockReturnValue({ data: [], rows: [] })
+
+  mockUseRecentFiles.mockReturnValue(recentsResult)
+
+  return render(
+    <AppLike client={client} store={store}>
+      <RecentViewWithProvider />
+    </AppLike>
+  )
+}
+
+const someFiles = () =>
+  generateFileFixtures({
+    nbFiles: 2,
+    path: '/test',
+    dir_id: '123',
+    updated_at: '2020-05-14T10:33:31.365224+02:00'
+  }).map(f => ({ ...f, displayedPath: '/test' }))
+
+describe('Recent View loading indicator', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation()
+    jest.spyOn(console, 'warn').mockImplementation()
+  })
+
+  it('shows a progress bar while shared-drive files are still loading and local files are already displayed', () => {
+    const { queryByRole } = renderRecentView({
+      data: someFiles(),
+      fetchStatus: 'loading',
+      error: null
+    })
+
+    expect(queryByRole('progressbar')).not.toBeNull()
+  })
+
+  it('hides the progress bar once everything is loaded', () => {
+    const { queryByRole } = renderRecentView({
+      data: someFiles(),
+      fetchStatus: 'loaded',
+      error: null
+    })
+
+    expect(queryByRole('progressbar')).toBeNull()
+  })
+
+  it('does not show the progress bar while loading with no list yet (the skeleton covers that case)', () => {
+    const { queryByRole } = renderRecentView({
+      data: [],
+      fetchStatus: 'loading',
+      error: null
+    })
+
+    expect(queryByRole('progressbar')).toBeNull()
+  })
+})