perf: download only images and optimize image selection for upload list view, prioritize best-fit size (#11696)

### What?

This PR optimizes how images are selected for display in the upload list
view. It ensures that only image files are processed and selects the
most appropriate size to minimize unnecessary downloads and improve
performance.

#### Previously:

- Non-image files were being processed unnecessarily, despite not
generating thumbnails.
- Images without a `thumbnailURL` defaulted to their original full size,
even when smaller, optimized versions were available.

#### Now:

- **Only images** are processed for thumbnails, avoiding redundant
requests for non-images.
- **The smallest available image within a target range** (`40px -
180px`) is prioritized for display.
- **If no images fit within this range**, the logic selects:
  - The next smallest larger image (if available).
- The **original** image if it is smaller than the next available larger
size.
  - The largest **smaller** image if no better fit exists.

### Why?

Prevents unnecessary downloads of non-image files, reduces bandwidth
usage by selecting more efficient image sizes and improves load times
and performance in the list view.

### How?
- **Filters out non-image files** when determining which assets to
display.
- Uses a more precise selection algorithm to find the best-fit image
size:
  - Prefers the smallest image within `40px - 180px`.
- Falls back to the closest match above or below the range if no
in-range image exists.
- Ensures the original image is only used when it provides a better fit.

Fixes #11690

Before (4.7mb transfer):

![chrome_2025-03-14_02-39-16](https://github.com/user-attachments/assets/4d87b0ae-164e-47c5-a426-43bd2083b725)

After (129kb transfer):

![chrome_2025-03-14_01-01-19](https://github.com/user-attachments/assets/1cdab4ec-f3ad-40ae-9099-c8b789588ac7)

Author: akhrarovsaid

packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx

@@ -13,6 +13,9 @@ import './index.scss'
 
 const baseClass = 'file'
 
+const targetThumbnailSizeMin = 40
+const targetThumbnailSizeMax = 180
+
 export interface FileCellProps
   extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {
   readonly collectionConfig: ClientCollectionConfig
@@ -28,6 +31,50 @@ export const FileCell: React.FC<FileCellProps> = ({
   const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true
 
   if (previewAllowed) {
+    let fileSrc: string | undefined = rowData?.thumbnailURL ?? rowData?.url
+
+    if (
+      rowData?.url &&
+      !rowData?.thumbnailURL &&
+      typeof rowData?.mimeType === 'string' &&
+      rowData?.mimeType.startsWith('image') &&
+      rowData?.sizes
+    ) {
+      const sizes = Object.values<{ url?: string; width?: number }>(rowData.sizes)
+
+      const bestFit = sizes.reduce(
+        (closest, current) => {
+          if (!current.width || current.width < targetThumbnailSizeMin) {
+            return closest
+          }
+
+          if (current.width >= targetThumbnailSizeMin && current.width <= targetThumbnailSizeMax) {
+            return !closest.width ||
+              current.width < closest.width ||
+              closest.width < targetThumbnailSizeMin ||
+              closest.width > targetThumbnailSizeMax
+              ? current
+              : closest
+          }
+
+          if (
+            !closest.width ||
+            (!closest.original &&
+              closest.width < targetThumbnailSizeMin &&
+              current.width > closest.width) ||
+            (closest.width > targetThumbnailSizeMax && current.width < closest.width)
+          ) {
+            return current
+          }
+
+          return closest
+        },
+        { original: true, url: rowData?.url, width: rowData?.width },
+      )
+
+      fileSrc = bestFit.url || fileSrc
+    }
+
     return (
       <div className={baseClass}>
         <Thumbnail
@@ -37,7 +84,7 @@ export const FileCell: React.FC<FileCellProps> = ({
             ...rowData,
             filename,
           }}
-          fileSrc={rowData?.thumbnailURL || rowData?.url}
+          fileSrc={fileSrc}
           size="small"
           uploadConfig={collectionConfig?.upload}
         />

packages/ui/src/elements/Thumbnail/index.tsx

@@ -21,13 +21,13 @@ export type ThumbnailProps = {
 }
 
 export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
-  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props
+  const { className = '', doc: { filename, mimeType } = {}, fileSrc, imageCacheTag, size } = props
   const [fileExists, setFileExists] = React.useState(undefined)
 
   const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')
 
   React.useEffect(() => {
-    if (!fileSrc) {
+    if (!fileSrc || (typeof mimeType === 'string' && !mimeType.startsWith('image'))) {
       setFileExists(false)
       return
     }
@@ -41,7 +41,7 @@ export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
     img.onerror = () => {
       setFileExists(false)
     }
-  }, [fileSrc])
+  }, [fileSrc, mimeType])
 
   let src: string = ''