Implement skeleton loader (forms, query builder, attachment)

specifyweb/frontend/js_src/lib/components/AppResources/EditorWrapper.tsx

@@ -8,14 +8,15 @@ import { fetchResource } from '../DataModel/resource';
 import type { SpAppResource, SpViewSetObj } from '../DataModel/types';
 import { NotFoundView } from '../Router/NotFoundView';
 import { locationToState, useStableLocation } from '../Router/RouterState';
+import { AppResourceSkeleton } from '../SkeletonLoaders/AppResource';
 import { findAppResourceDirectory } from './Create';
 import { AppResourceEditor } from './Editor';
 import type { AppResourceMode } from './helpers';
 import { getAppResourceMode } from './helpers';
 import type { AppResources } from './hooks';
 import { useResourcesTree } from './hooks';
 import type { AppResourcesOutlet } from './index';
-import { ScopedAppResourceDir } from './types';
+import type { ScopedAppResourceDir } from './types';
 
 export function AppResourceView(): JSX.Element {
   return <Wrapper mode="appResources" />;
@@ -43,8 +44,9 @@ export function Wrapper({
   const baseHref = `/specify/resources/${
     mode === 'appResources' ? 'app-resource' : 'view-set'
   }`;
-  return initialData === undefined ? null : resource === undefined ||
-    directory === undefined ? (
+  return initialData === undefined ? (
+    <AppResourceSkeleton />
+  ) : resource === undefined || directory === undefined ? (
     <NotFoundView container={false} />
   ) : (
     <AppResourceEditor
@@ -121,7 +123,7 @@ function useInitialData(
             ),
       [initialDataFrom]
     ),
-    true
+    false
   )[0];
 }
 

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

@@ -11,7 +11,7 @@ import type { Attachment } from '../DataModel/types';
 import { raise } from '../Errors/Crash';
 import { ErrorBoundary } from '../Errors/ErrorBoundary';
 import { ResourceView } from '../Forms/ResourceView';
-import { loadingGif } from '../Molecules';
+import { AttachmentGallerySkeleton } from '../SkeletonLoaders/AttachmentGallery';
 import { AttachmentCell } from './Cell';
 import { AttachmentDialog } from './Dialog';
 
@@ -93,9 +93,11 @@ export function AttachmentGallery({
             }
           />
         ))}
-        {isComplete
-          ? attachments.length === 0 && <p>{attachmentsText.noAttachments()}</p>
-          : loadingGif}
+        {isComplete ? (
+          attachments.length === 0 && <p>{attachmentsText.noAttachments()}</p>
+        ) : (
+          <AttachmentGallerySkeleton />
+        )}
       </Container.Base>
       {typeof viewRecord === 'object' && (
         <ErrorBoundary dismissible>

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

@@ -24,6 +24,7 @@ import { loadingBar } from '../Molecules';
 import { Dialog } from '../Molecules/Dialog';
 import { FilePicker } from '../Molecules/FilePicker';
 import { ProtectedTable } from '../Permissions/PermissionDenied';
+import { AttachmentPluginSkeleton } from '../SkeletonLoaders/AttachmentPlugin';
 import { attachmentSettingsPromise, uploadFile } from './attachments';
 import { AttachmentViewer } from './Viewer';
 
@@ -52,7 +53,7 @@ export function useAttachment(
         false,
       [resource]
     ),
-    true
+    false
   );
 }
 
@@ -64,13 +65,16 @@ function ProtectedAttachmentsPlugin({
   readonly mode: FormMode;
 }): JSX.Element | null {
   const [attachment, setAttachment] = useAttachment(resource);
+
   useErrorContext('attachment', attachment);
 
   const filePickerContainer = React.useRef<HTMLDivElement | null>(null);
   const related = useTriggerState(
     resource?.specifyModel.name === 'Attachment' ? undefined : resource
   );
-  return attachment === undefined ? null : (
+  return attachment === undefined ? (
+    <AttachmentPluginSkeleton />
+  ) : (
     <div
       className="h-full overflow-x-auto"
       ref={filePickerContainer}

specifyweb/frontend/js_src/lib/components/FormCells/FormTable.tsx

@@ -31,6 +31,7 @@ import type { SortConfig } from '../Molecules/Sorting';
 import { SortIndicator } from '../Molecules/Sorting';
 import { hasTablePermission } from '../Permissions/helpers';
 import { userPreferences } from '../Preferences/userPreferences';
+import { AttachmentPluginSkeleton } from '../SkeletonLoaders/AttachmentPlugin';
 import { relationshipIsToMany } from '../WbPlanView/mappingHelpers';
 import { FormCell } from './index';
 
@@ -481,6 +482,6 @@ function Attachment({
   ) : attachment === false ? (
     <p>{formsText.noData()}</p>
   ) : (
-    loadingGif
+    <AttachmentPluginSkeleton />
   );
 }

specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx

@@ -19,6 +19,7 @@ import { attachmentView } from '../FormParse/webOnlyViews';
 import { loadingGif } from '../Molecules';
 import { userPreferences } from '../Preferences/userPreferences';
 import { unsafeTriggerNotFound } from '../Router/Router';
+import { FormSkeleton } from '../SkeletonLoaders/Form';
 
 const FormLoadingContext = React.createContext<boolean>(false);
 FormLoadingContext.displayName = 'FormLoadingContext';
@@ -111,7 +112,7 @@ export function SpecifyForm<SCHEMA extends AnySchema>({
             {loadingGif}
           </div>
         )}
-        {formIsLoaded && (
+        {formIsLoaded ? (
           <DataEntry.Grid
             aria-hidden={showLoading}
             className={`${showLoading ? 'pointer-events-none opacity-50' : ''}`}
@@ -147,6 +148,8 @@ export function SpecifyForm<SCHEMA extends AnySchema>({
               </React.Fragment>
             ))}
           </DataEntry.Grid>
+        ) : (
+          <FormSkeleton />
         )}
       </div>
     </FormLoadingContext.Provider>

specifyweb/frontend/js_src/lib/components/QueryBuilder/Wrapped.tsx

@@ -25,6 +25,7 @@ import { isTreeModel, treeRanksPromise } from '../InitialContext/treeRanks';
 import { useTitle } from '../Molecules/AppTitle';
 import { hasPermission, hasToolPermission } from '../Permissions/helpers';
 import { userPreferences } from '../Preferences/userPreferences';
+import { QueryBuilderSkeleton } from '../SkeletonLoaders/QueryBuilder';
 import { getMappedFields, mappingPathIsComplete } from '../WbPlanView/helpers';
 import { getMappingLineProps } from '../WbPlanView/LineComponents';
 import { MappingView } from '../WbPlanView/MapperComponents';
@@ -92,7 +93,7 @@ export function QueryBuilder({
       'queryBuilder',
       queryResource.isNew() ? 'create' : 'update'
     );
-  const [treeRanksLoaded = false] = useAsyncState(fetchTreeRanks, true);
+  const [treeRanksLoaded = false] = useAsyncState(fetchTreeRanks, false);
 
   const [query, setQuery] = useResource(queryResource);
   useErrorContext('query', query);
@@ -557,5 +558,7 @@ export function QueryBuilder({
         )}
       </Form>
     </Container.Full>
-  ) : null;
+  ) : (
+    <QueryBuilderSkeleton />
+  );
 }

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Skeleton } from './Skeleton';
+
+export function AppResourceSkeleton() {
+  return (
+    <Skeleton>
+      <rect height="8" rx="3" ry="3" width="141" x="28" y="1" />
+      <rect height="10" rx="2" ry="2" width="10" x="10" y="0" />
+      <rect height="10" rx="2" ry="2" width="10" x="190" y="0" />
+      <rect height="10" rx="2" ry="2" width="15" x="203" y="0" />
+      <rect height="10" rx="2" ry="2" width="15" x="220.5" y="0" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="28" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="48" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="68" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="88" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="108" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="128" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="148" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="168" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="188" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="208" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="228" />
+      <rect height="8" rx="2" ry="2" width="195" x="28" y="248" />
+    </Skeleton>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { DEFAULT_FETCH_LIMIT } from '../DataModel/collection';
+import { Skeleton } from './Skeleton';
+
+export function AttachmentGallerySkeleton() {
+  return <Skeleton viewBox="0 0 115 150">{createRectangles()}</Skeleton>;
+}
+
+function createRectangles() {
+  const rectWidth = 22;
+  const rectHeight = 22;
+  const rectRadius = 2;
+  return Array.from({ length: DEFAULT_FETCH_LIMIT }, (_, index) => (
+    <rect
+      height={rectHeight}
+      rx={rectRadius}
+      ry={rectRadius}
+      width={rectWidth}
+      x={rectWidth * index + 5}
+      y={rectHeight * index + Math.floor(index / 4) * 10}
+    />
+  ));
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Skeleton } from './Skeleton';
+
+export function AttachmentPluginSkeleton() {
+  return (
+    <Skeleton viewBox="0 0 220 400">
+      <rect height="140" rx="2" ry="2" width="120" x="7" y="0" />
+      <rect height="7" rx="2" ry="2" width="36" x="135" y="0" />
+      <rect height="12" rx="2" ry="2" width="12" x="191" y="0" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="18" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="28" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="38" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="48" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="58" />
+      <rect height="5" rx="2" ry="2" width="33" x="135" y="68" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="78" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="88" />
+      <rect height="5" rx="2" ry="2" width="68" x="135" y="98" />
+      <rect height="15" rx="2" ry="2" width="30" x="135" y="125" />
+      <rect height="15" rx="2" ry="2" width="30" x="173" y="125" />
+    </Skeleton>
+  );
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Skeleton } from './Skeleton';
+
+export function FormSkeleton() {
+  return (
+    <Skeleton className="h-full w-[120vh]">
+      <rect height="3" rx="2" ry="2" width="22" x="9" y="6" />
+      <rect height="5" rx="2" ry="2" width="41" x="33" y="5" />
+      <rect height="3" rx="2" ry="2" width="22" x="107" y="6" />
+      <rect height="5" rx="2" ry="2" width="25" x="131" y="5" />
+      <rect height="5" rx="2" ry="2" width="25" x="157" y="5" />
+
+      <rect height="5" rx="2" ry="2" width="52" x="9" y="18" />
+      <circle cx="66" cy="20.5" r="3" />
+      <circle cx="74" cy="20.5" r="3" />
+      <rect height="3" rx="2" ry="2" width="22" x="9" y="25" />
+
+      <rect height="3" rx="2" ry="2" width="22" x="28" y="35" />
+      <rect height="5" rx="2" ry="2" width="100" x="54" y="34" />
+      <circle cx="158" cy="36.5" r="2" />
+      <circle cx="163" cy="36.5" r="2" />
+      <circle cx="168" cy="36.5" r="2" />
+
+      <rect height="5" rx="2" ry="2" width="52" x="9" y="53" />
+      <circle cx="66" cy="55.5" r="3" />
+      <rect height="3" rx="2" ry="2" width="22" x="9" y="60" />
+
+      <rect height="20" rx="2" ry="2" width="96" x="86" y="47.5" />
+
+      <rect height="5" rx="2" ry="2" width="52" x="9" y="73" />
+      <circle cx="66" cy="75.5" r="3" />
+
+      <rect height="3" rx="2" ry="2" width="22" x="9" y="93" />
+      <rect height="7" rx="2" ry="2" width="25" x="9" y="98" />
+      <rect height="7" rx="2" ry="2" width="25" x="40" y="98" />
+      <rect height="7" rx="2" ry="2" width="25" x="125" y="98" />
+
+      <rect height="5" rx="2" ry="2" width="130" x="9" y="120" />
+    </Skeleton>
+  );
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Skeleton } from './Skeleton';
+
+export function QueryBuilderSkeleton() {
+  return (
+    <Skeleton viewBox="0 0 240 400">
+      <rect height="5" rx="2" ry="2" width="5" x="9" y="5" />
+      <rect height="5" rx="2" ry="2" width="41" x="20" y="5" />
+      <rect height="5" rx="2" ry="2" width="25" x="132" y="5" />
+      <rect height="5" rx="2" ry="2" width="25" x="161" y="5" />
+
+      <rect height="5" rx="2" ry="2" width="52" x="9" y="20" />
+      <rect height="38" rx="2" ry="2" width="52" x="9" y="27" />
+      <rect height="38" rx="2" ry="2" width="52" x="65" y="27" />
+      <rect height="38" rx="2" ry="2" width="5" x="121" y="27" />
+
+      <rect height="5" rx="2" ry="2" width="185" x="11" y="80" />
+      <rect height="5" rx="2" ry="2" width="5" x="198" y="80" />
+      <rect height="5" rx="2" ry="2" width="5" x="204" y="80" />
+      <rect height="5" rx="2" ry="2" width="5" x="210" y="80" />
+      <rect height="5" rx="2" ry="2" width="5" x="216" y="80" />
+
+      <rect height="5" rx="2" ry="2" width="5" x="13" y="190" />
+      <rect height="5" rx="2" ry="2" width="45" x="22" y="190" />
+
+      <rect height="5" rx="2" ry="2" width="5" x="122" y="190" />
+      <rect height="7" rx="2" ry="2" width="30" x="168" y="188.5" />
+      <rect height="7" rx="2" ry="2" width="30" x="132" y="188.5" />
+    </Skeleton>
+  );
+}

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+import { userPreferences } from '../Preferences/userPreferences';
+
+type SkeletonProps = {
+  readonly speed?: number;
+  readonly viewBox?: string;
+  readonly className?: string;
+  readonly children: ReactNode;
+};
+
+export function Skeleton({
+  speed = 3,
+  viewBox = '0 0 200 400',
+  className = 'h-full w-full',
+  children,
+}: SkeletonProps): JSX.Element {
+  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
+  return (
+    <div className={className}>
+      <ContentLoader
+        animate={motionPref !== 'reduce'}
+        backgroundColor="#333"
+        foregroundColor="#999"
+        speed={speed}
+        viewBox={viewBox}
+      >
+        {children}
+      </ContentLoader>
+    </div>
+  );
+}