diff --git a/specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx b/specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx
index 900a921c5ad..d7840e410e6 100644
--- a/specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx
@@ -72,7 +72,6 @@ export function SpecifyForm<SCHEMA extends AnySchema>({
   const resolvedResource = loadedResource ?? oldResourceRef.current;
   const formIsLoaded =
     typeof viewDefinition === 'object' && typeof resolvedResource === 'object';
-  // Const formIsLoaded = false;
 
   // If parent resource is loading, don't duplicate the loading bar in children
   const isAlreadyLoading = React.useContext(FormLoadingContext);
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AppResource.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AppResource.tsx
index a5527e1c935..3bb03ff2bab 100644
--- a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AppResource.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AppResource.tsx
@@ -1,37 +1,24 @@
 import React from 'react';
-import ContentLoader from 'react-content-loader';
+import { Skeleton } from './Skeleton';
 
-import { userPreferences } from '../Preferences/userPreferences';
-
-export function AppResourceSkeleton(): JSX.Element {
-  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
-  return (
-    <div className="h-full w-full">
-      <ContentLoader
-        animate={motionPref !== 'reduce'}
-        backgroundColor="#333"
-        foregroundColor="#999"
-        speed={3}
-        viewBox="0 0 240 400"
-      >
-        <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" />
-      </ContentLoader>
-    </div>
-  );
-}
+export const AppResourceSkeleton = () => (
+  <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>
+);
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx
index 34033c7a75d..df5d07bef36 100644
--- a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx
@@ -1,55 +1,25 @@
 import React from 'react';
-import ContentLoader from 'react-content-loader';
-
-import { userPreferences } from '../Preferences/userPreferences';
-
-const DEFAULT_FETCH_LIMIT = 20;
-
-export function AttachmentGallerySkeleton(): JSX.Element {
-  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
-
-  function createRectangles() {
-    const rectWidth = 22;
-    const rectHeight = 22;
-    const rectRadius = 2;
-    let rectX = 5; // Starting x position
-    let rectY = 0; // Starting y position
-    const rectangles = []; // Array to hold the generated rectangles
-
-    for (let i = 0; i < DEFAULT_FETCH_LIMIT; i++) {
-      rectangles.push(
-        <rect
-          height={rectHeight}
-          rx={rectRadius}
-          ry={rectRadius}
-          width={rectWidth}
-          x={rectX}
-          y={rectY}
-        />
-      );
-
-      rectX += rectWidth + 5;
-
-      if ((i + 1) % 4 === 0) {
-        rectX = 5;
-        rectY += rectHeight + 10;
-      }
-    }
-
-    return rectangles;
-  }
-
-  return (
-    <div className="h-full w-full">
-      <ContentLoader
-        animate={motionPref !== 'reduce'}
-        backgroundColor="#333"
-        foregroundColor="#999"
-        speed={3}
-        viewBox="0 0 115 150"
-      >
-        {createRectangles()}
-      </ContentLoader>
-    </div>
-  );
+import { Skeleton } from './Skeleton';
+import { DEFAULT_FETCH_LIMIT } from '../DataModel/collection';
+
+export const AttachmentGallerySkeleton = () => (
+  <Skeleton viewBox="0 0 115 150">{createRectangles()}</Skeleton>
+);
+
+function createRectangles() {
+  const rectWidth = 22;
+  const rectHeight = 22;
+  const rectRadius = 2;
+  const rectangles = 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}
+    />
+  ));
+
+  return rectangles;
 }
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentPlugin.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentPlugin.tsx
index ba7e2ffd6f1..4decdff82ef 100644
--- a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentPlugin.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentPlugin.tsx
@@ -1,34 +1,21 @@
 import React from 'react';
-import ContentLoader from 'react-content-loader';
+import { Skeleton } from './Skeleton';
 
-import { userPreferences } from '../Preferences/userPreferences';
-
-export function AttachmentPluginSkeleton(): JSX.Element {
-  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
-  return (
-    <div className="h-full w-full">
-      <ContentLoader
-        animate={motionPref !== 'reduce'}
-        backgroundColor="#333"
-        foregroundColor="#999"
-        speed={3}
-        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" />
-      </ContentLoader>
-    </div>
-  );
-}
+export const AttachmentPluginSkeleton = () => (
+  <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>
+);
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Form.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Form.tsx
index bf7a379ec3a..2f388f54825 100644
--- a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Form.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Form.tsx
@@ -1,52 +1,39 @@
 import React from 'react';
-import ContentLoader from 'react-content-loader';
-
-import { userPreferences } from '../Preferences/userPreferences';
-
-export function FormSkeleton(): JSX.Element {
-  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
-  return (
-    <div className="h-full w-[120vh]">
-      <ContentLoader
-        animate={motionPref !== 'reduce'}
-        backgroundColor="#333"
-        foregroundColor="#999"
-        speed={3}
-        viewBox="0 0 200 400"
-      >
-        <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" />
-      </ContentLoader>
-    </div>
-  );
-}
+import { Skeleton } from './Skeleton';
+
+export const FormSkeleton = () => (
+  <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>
+);
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/QueryBuilder.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/QueryBuilder.tsx
index f58c4a8dca8..248a29cb000 100644
--- a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/QueryBuilder.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/QueryBuilder.tsx
@@ -1,42 +1,29 @@
 import React from 'react';
-import ContentLoader from 'react-content-loader';
+import { Skeleton } from './Skeleton';
 
-import { userPreferences } from '../Preferences/userPreferences';
+export const QueryBuilderSkeleton = () => (
+  <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" />
 
-export function QueryBuilderSkeleton(): JSX.Element {
-  const [motionPref] = userPreferences.use('general', 'ui', 'reduceMotion');
-  return (
-    <div className="h-full w-full">
-      <ContentLoader
-        animate={motionPref !== 'reduce'}
-        backgroundColor="#333"
-        foregroundColor="#999"
-        speed={3}
-        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="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="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="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" />
-      </ContentLoader>
-    </div>
-  );
-}
+    <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>
+);
diff --git a/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Skeleton.tsx b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Skeleton.tsx
new file mode 100644
index 00000000000..6e61bb0a263
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Skeleton.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import ContentLoader from 'react-content-loader';
+import { userPreferences } from '../Preferences/userPreferences';
+
+type SkeletonProps = {
+  speed?: number;
+  viewBox?: string;
+  className?: string;
+  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>
+  );
+}