feat: loader while fetching instances

src/components/Loader/Loader.module.scss

@@ -0,0 +1,14 @@
+.loader {
+    border: 4px solid rgba(255, 255, 255, 0.37);
+    border-left-color: #8CFEC0;
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

src/components/Loader/index.tsx

@@ -0,0 +1,7 @@
+import styles from "./Loader.module.scss";
+
+const Loader = () => {
+  return <div className={styles.loader} />;
+};
+
+export default Loader;

src/components/sections/InstancesSection/InstancesTable/index.tsx

@@ -4,6 +4,7 @@ import { Inter } from "next/font/google";
 import { Instance, type InstanceList } from "@/lib/interfaces/instance";
 import { fetchInstances } from "@/lib/instances";
 import InstanceRow from "./InstanceRow";
+import Loader from "@/components/Loader";
 
 const inter = Inter({
   weight: ["400", "500", "600", "700"],
@@ -35,10 +36,22 @@ const InstancesTable = () => {
       setSelectedProtocol(protocols[0]);
     } catch (e) {
       console.error(e);
+      alert("Failed to fetch instances. Is GitHub accessible?");
     }
   };
 
-  if (!instanceList) return null;
+  if (!instanceList)
+    return (
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Loader />
+      </div>
+    );
 
   return (
     <div className={[styles.tableContainer, inter.className].join(" ")}>