diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss new file mode 100644 index 0000000..32fdb31 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx new file mode 100644 index 0000000..221c4f9 --- /dev/null +++ b/src/components/Loader/index.tsx @@ -0,0 +1,7 @@ +import styles from "./Loader.module.scss"; + +const Loader = () => { + return
; +}; + +export default Loader; diff --git a/src/components/sections/InstancesSection/InstancesTable/index.tsx b/src/components/sections/InstancesSection/InstancesTable/index.tsx index cd0ed9a..648ea98 100644 --- a/src/components/sections/InstancesSection/InstancesTable/index.tsx +++ b/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 ( +