From b839278366ff028650ae883ee15ce83a90f55965 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Thu, 24 Aug 2023 09:52:38 -0500
Subject: [PATCH] add loading animation to resource page
---
.../bar-chart.svg} | 2 +-
src/components/LoadingBarChart.tsx | 25 +++++++++++++++++++
src/pages/resources/index.tsx | 3 ++-
3 files changed, 28 insertions(+), 2 deletions(-)
rename public/{bar-chart-loading.svg => loading/bar-chart.svg} (86%)
create mode 100644 src/components/LoadingBarChart.tsx
diff --git a/public/bar-chart-loading.svg b/public/loading/bar-chart.svg
similarity index 86%
rename from public/bar-chart-loading.svg
rename to public/loading/bar-chart.svg
index a97072f..ac135f1 100755
--- a/public/bar-chart-loading.svg
+++ b/public/loading/bar-chart.svg
@@ -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">
diff --git a/src/components/LoadingBarChart.tsx b/src/components/LoadingBarChart.tsx
new file mode 100644
index 0000000..74f1d39
--- /dev/null
+++ b/src/components/LoadingBarChart.tsx
@@ -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>
+ );
+};
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 5922096..d27cb1d 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -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);