add loading animation to resource page

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>
+  );
+};

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);