brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add loading animation to resource page

Browse Source
This commit is contained in:
Brandon Egger 2023-08-24 09:52:38 -05:00
parent 4c49950122
commit b839278366
3 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/bar-chart-loading.svg → public/loading/bar-chart.svg
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(241, 242, 243); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(180 50 50)"><rect x="15" y="15" width="10" height="40" fill="#fcd34d">
<animate attributeName="height" values="50;70;30;50" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" begin="-0.4s"></animate>
</rect><rect x="35" y="15" width="10" height="40" fill="#020202">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

25
src/components/LoadingBarChart.tsx Normal file
View File

@ -0,0 +1,25 @@
import Image from "next/image";
export const LoadingBarChart = ({
width,
height,
}: {
width: number;
height: number;
}) => {
return (
<div className="my-16 grid h-full w-full place-items-center">
<div className="h-fit w-fit animate-pulse rounded-xl border border-stone-400 bg-stone-100 p-4 drop-shadow-xl">
<Image
alt="loading content"
src="./loading/bar-chart.svg"
width={width}
height={height}
/>
<p className="text-center italic text-stone-400">
page content loading
</p>
</div>
</div>
);
};

3
src/pages/resources/index.tsx
View File

@ -7,6 +7,7 @@ import { api } from "~/utils/api";
import { parseQueryData } from "~/utils/parseSearchForm";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import { LoadingBarChart } from "~/components/LoadingBarChart";
const Resources = () => {
const router = useRouter();
@ -31,7 +32,7 @@ const Resources = () => {
const ConditionalTable = () => {
if (!resourceQuery.data) {
return <></>;
return <LoadingBarChart width={200} height={200} />;
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);