fix: upload has many field updates (#7894)

## Description

Implements fixes and style changes for the upload field component.

Fixes https://github.com/payloadcms/payload/issues/7819

![CleanShot 2024-08-27 at 16 22
33](https://github.com/user-attachments/assets/fa27251c-20b8-45ad-9109-55dee2e19e2f)

![CleanShot 2024-08-27 at 16 22
49](https://github.com/user-attachments/assets/de2d24f9-b2f5-4b72-abbe-24a6c56a4c21)


- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [ ] Chore (non-breaking change which does not add functionality)
- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Change to the
[templates](https://github.com/payloadcms/payload/tree/main/templates)
directory (does not affect core functionality)
- [ ] Change to the
[examples](https://github.com/payloadcms/payload/tree/main/examples)
directory (does not affect core functionality)
- [ ] This change requires a documentation update

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

---------

Co-authored-by: Paul Popus <paul@nouance.io>

packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx

@@ -12,21 +12,31 @@ import { Button } from '../../Button/index.js'
 import { Drawer } from '../../Drawer/index.js'
 import { ErrorPill } from '../../ErrorPill/index.js'
 import { Pill } from '../../Pill/index.js'
+import { ShimmerEffect } from '../../ShimmerEffect/index.js'
 import { Actions } from '../ActionsBar/index.js'
 import { AddFilesView } from '../AddFilesView/index.js'
 import { useFormsManager } from '../FormsManager/index.js'
+import { useBulkUpload } from '../index.js'
 import './index.scss'
 
 const AnimateHeight = (AnimateHeightImport.default ||
   AnimateHeightImport) as typeof AnimateHeightImport.default
 
-const drawerSlug = 'bulk-upload-drawer--add-more-files'
+const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files'
 
 const baseClass = 'file-selections'
 
 export function FileSidebar() {
-  const { activeIndex, addFiles, forms, removeFile, setActiveIndex, totalErrorCount } =
-    useFormsManager()
+  const {
+    activeIndex,
+    addFiles,
+    forms,
+    isInitializing,
+    removeFile,
+    setActiveIndex,
+    totalErrorCount,
+  } = useFormsManager()
+  const { initialFiles, maxFiles } = useBulkUpload()
   const { i18n, t } = useTranslation()
   const { closeModal, openModal } = useModal()
   const [showFiles, setShowFiles] = React.useState(false)
@@ -41,8 +51,8 @@ export function FileSidebar() {
 
   const handleAddFiles = React.useCallback(
     (filelist: FileList) => {
-      addFiles(filelist)
-      closeModal(drawerSlug)
+      void addFiles(filelist)
+      closeModal(addMoreFilesDrawerSlug)
     },
     [addFiles, closeModal],
   )
@@ -56,6 +66,8 @@ export function FileSidebar() {
     return formattedSize
   }, [])
 
+  const totalFileCount = isInitializing ? initialFiles.length : forms.length
+
   return (
     <div
       className={[baseClass, showFiles && `${baseClass}__showingFiles`].filter(Boolean).join(' ')}
@@ -67,16 +79,18 @@ export function FileSidebar() {
             <ErrorPill count={totalErrorCount} i18n={i18n} withMessage />
             <p>
               <strong
-                title={`${forms.length} ${t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}
+                title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}
               >
-                {forms.length}{' '}
-                {t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}
+                {totalFileCount}{' '}
+                {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}
               </strong>
             </p>
           </div>
 
           <div className={`${baseClass}__header__actions`}>
-            <Pill onClick={() => openModal(drawerSlug)}>{t('upload:addFile')}</Pill>
+            {typeof maxFiles === 'number' && totalFileCount < maxFiles ? (
+              <Pill onClick={() => openModal(addMoreFilesDrawerSlug)}>{t('upload:addFile')}</Pill>
+            ) : null}
             <Button
               buttonStyle="transparent"
               className={`${baseClass}__toggler`}
@@ -85,8 +99,11 @@ export function FileSidebar() {
               <ChevronIcon direction={showFiles ? 'down' : 'up'} />
             </Button>
 
-            <Drawer Header={null} gutter={false} slug={drawerSlug}>
-              <AddFilesView onCancel={() => closeModal(drawerSlug)} onDrop={handleAddFiles} />
+            <Drawer Header={null} gutter={false} slug={addMoreFilesDrawerSlug}>
+              <AddFilesView
+                onCancel={() => closeModal(addMoreFilesDrawerSlug)}
+                onDrop={handleAddFiles}
+              />
             </Drawer>
           </div>
         </div>
@@ -99,6 +116,15 @@ export function FileSidebar() {
       <div className={`${baseClass}__animateWrapper`}>
         <AnimateHeight duration={200} height={!breakpoints.m || showFiles ? 'auto' : 0}>
           <div className={`${baseClass}__filesContainer`}>
+            {isInitializing && forms.length === 0 && initialFiles.length > 0
+              ? Array.from(initialFiles).map((file, index) => (
+                  <ShimmerEffect
+                    animationDelay={`calc(${index} * ${60}ms)`}
+                    height="35px"
+                    key={index}
+                  />
+                ))
+              : null}
             {forms.map(({ errorCount, formState }, index) => {
               const currentFile = formState.file.value as File