add error notice component to resource page

src/components/notice.tsx

@@ -0,0 +1,17 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"
+
+export const ErrorNotice = ({header, body, icon}: {header?: string, body?: string, icon?: boolean}) => {
+  return <>
+    {header ? (
+      <div className="rounded-xl mx-auto w-fit px-4 py-4 bg-red-100 border-red-300 border text-center font-semibold text-red-600">
+        {icon ? (
+          <div className="mx-auto grid place-items-center">
+            <ExclamationTriangleIcon className="w-10 h-10" />
+          </div>
+        ) : undefined}
+        <span className="text-lg font-semibold text-red-500">{header}</span>
+        {body ? (<p className="font-normal text-stone-600 text-sm mx-8 my-2">{body}</p>) : undefined}
+      </div>
+    ) : undefined}
+    </>
+}

src/pages/resources/index.tsx

@@ -8,6 +8,7 @@ import { parseQueryData } from "~/utils/parseSearchForm";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
 import { LoadingBarChart } from "~/components/LoadingBarChart";
+import { ErrorNotice } from "~/components/notice";
 
 const Resources = () => {
   const router = useRouter();
@@ -31,9 +32,16 @@ const Resources = () => {
   const printLink = `${router.route}/print?${printQueryStr}`;
 
   const ConditionalTable = () => {
-    if (!resourceQuery.data) {
+    if (resourceQuery.isLoading) {
       return <LoadingBarChart width={200} height={200} />;
     }
+    
+    if (!resourceQuery.data || resourceQuery.isError) {
+      return <div className="my-28">
+        <ErrorNotice icon header="Unable to pull available resources. Please try again."
+        body="If this issue persists, please contact a site administrator" />
+        </div>
+    }
 
     const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);