Skip to content

Commit

Permalink
Create a skeleton wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@CarolineDenis
CarolineDenis committed Apr 12, 2023
1 parent f3d6699 commit 0e09e7a
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 208 deletions.
1 change: 0 additions & 1 deletion specifyweb/frontend/js_src/lib/components/Forms/SpecifyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
57 changes: 22 additions & 35 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AppResource.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
76 changes: 23 additions & 53 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentGallery.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
}
51 changes: 19 additions & 32 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/AttachmentPlugin.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
89 changes: 38 additions & 51 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Form.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
59 changes: 23 additions & 36 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/QueryBuilder.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
32 changes: 32 additions & 0 deletions specifyweb/frontend/js_src/lib/components/SkeletonLoaders/Skeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 0e09e7a

Please sign in to comment.