Force Attachment Gallery to load all attachments on screen (#6400)

* Use Gallery column count in loading skeleton

* Lint code with ESLint and Prettier

Triggered by d5f6dcf on branch refs/heads/issue-3567

* Force loading if not complete and container can't scroll

* Force fetch on scale change and window change

* Always load attachments if skeleton is on screen

* Lint code with ESLint and Prettier

Triggered by 1442d51 on branch refs/heads/issue-3567

Author: alesan99

specifyweb/frontend/js_src/lib/components/Attachments/Gallery.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { attachmentsText } from '../../localization/attachments';
+import { listen } from '../../utils/events';
 import type { RA } from '../../utils/types';
 import { replaceItem } from '../../utils/utils';
 import { Container } from '../Atoms';
@@ -11,11 +12,13 @@ import type { Attachment } from '../DataModel/types';
 import { raise } from '../Errors/Crash';
 import { ErrorBoundary } from '../Errors/ErrorBoundary';
 import { ResourceView } from '../Forms/ResourceView';
+import { getPref } from '../InitialContext/remotePrefs';
 import { AttachmentGallerySkeleton } from '../SkeletonLoaders/AttachmentGallery';
 import { AttachmentCell } from './Cell';
 import { AttachmentDialog } from './Dialog';
 
-const preFetchDistance = 200;
+const defaultPreFetchDistance = 200;
+const attachmentSkeletonRows = 2;
 
 export function AttachmentGallery({
   attachments,
@@ -37,6 +40,32 @@ export function AttachmentGallery({
 }): JSX.Element {
   const containerRef = React.useRef<HTMLElement | null>(null);
 
+  const [preFetchDistance, setPreFetchDistance] = React.useState<number>(
+    defaultPreFetchDistance
+  );
+  const [columns, setColumns] = React.useState<number>(3);
+  const attachmentHeight = getPref('attachment.preview_size');
+  React.useEffect(() => {
+    const calculateColumns = (ref: React.RefObject<HTMLElement | null>) => {
+      if (ref.current) {
+        const rootFontSize = Number.parseFloat(
+          window.getComputedStyle(document.documentElement).fontSize
+        ); // Equivalent to 1rem
+        const gap = rootFontSize;
+        const columnWidth = scale * rootFontSize + gap;
+        setPreFetchDistance(
+          Math.max(
+            defaultPreFetchDistance,
+            (attachmentHeight + gap) * attachmentSkeletonRows + gap
+          )
+        );
+        setColumns(Math.floor((ref.current.clientWidth - gap) / columnWidth));
+      }
+    };
+    calculateColumns(containerRef);
+    return listen(window, 'resize', () => calculateColumns(containerRef));
+  }, [scale]);
+
   const rawFillPage = React.useCallback(
     async () =>
       // Fetch more attachments when within 200px of the bottom
@@ -50,15 +79,16 @@ export function AttachmentGallery({
 
   const fillPage = handleFetchMore === undefined ? undefined : rawFillPage;
 
-  React.useEffect(
-    () =>
-      // Fetch attachments while scroll bar is not visible
-      void (containerRef.current?.scrollHeight ===
-      containerRef.current?.clientHeight
-        ? fillPage?.().catch(raise)
-        : undefined),
-    [fillPage, attachments]
-  );
+  React.useEffect(() => {
+    // Fetch attachments while scroll bar is not visible
+    const noScrollFetch = () => {
+      setTimeout(() => {
+        fillPage?.().catch(raise);
+      }, 10); // Wait for container to re-render before checking if scrolling is disabled
+    };
+    noScrollFetch();
+    return listen(window, 'resize', noScrollFetch);
+  }, [fillPage, attachments, scale]);
 
   const [viewRecord, setViewRecord] = React.useState<
     SpecifyResource<AnySchema> | undefined
@@ -75,11 +105,11 @@ export function AttachmentGallery({
   return (
     <>
       <Container.Base
-        className="grid flex-1 grid-cols-[repeat(auto-fit,minmax(var(--scale),1fr))]
-          items-center gap-4 shadow-none"
+        className="grid flex-1 items-center gap-4 shadow-none"
         forwardRef={containerRef}
         style={
           {
+            gridTemplateColumns: `repeat(${columns}, minmax(0px, 1fr))`,
             '--scale': `${scale}rem`,
           } as React.CSSProperties
         }
@@ -106,7 +136,11 @@ export function AttachmentGallery({
         {isComplete ? (
           attachments.length === 0 && <p>{attachmentsText.noAttachments()}</p>
         ) : (
-          <AttachmentGallerySkeleton />
+          <AttachmentGallerySkeleton
+            fetchNumber={
+              columns * attachmentSkeletonRows - (attachments.length % columns)
+            }
+          />
         )}
       </Container.Base>
       {typeof viewRecord === 'object' && (

specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx

@@ -3,10 +3,14 @@ import React from 'react';
 import { DEFAULT_FETCH_LIMIT } from '../DataModel/collection';
 import { Skeleton } from './Skeleton';
 
-export function AttachmentGallerySkeleton() {
+export function AttachmentGallerySkeleton({
+  fetchNumber = DEFAULT_FETCH_LIMIT,
+}: {
+  readonly fetchNumber?: number;
+}): JSX.Element {
   return (
     <Skeleton.Root className="contents">
-      {Array.from({ length: DEFAULT_FETCH_LIMIT }, (_, index) => (
+      {Array.from({ length: fetchNumber }, (_, index) => (
         <Skeleton.Square key={index} />
       ))}
     </Skeleton.Root>