feat(explorer): add loader to pages

Author: vplasencia

apps/explorer/src/app/[network]/[group]/page.tsx

@@ -15,8 +15,11 @@ export default function Group() {
     const [filteredCommitments, setFilteredCommitments] = useState<string[]>([])
     const [filteredProofs, setFilteredProofs] = useState<any[]>([])
 
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
         const fetchData = async () => {
+            setLoading(true)
             const subgraph = new SemaphoreSubgraph(network)
 
             const groupInfo = await subgraph.getGroup(groupId, {
@@ -28,6 +31,7 @@ export default function Group() {
 
             setFilteredCommitments(groupInfo.members || [])
             setFilteredProofs(groupInfo.validatedProofs || [])
+            setLoading(false)
         }
 
         fetchData()
@@ -59,7 +63,11 @@ export default function Group() {
         [group]
     )
 
-    return (
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
         group && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
                 <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">

apps/explorer/src/app/[network]/page.tsx

@@ -13,8 +13,11 @@ export default function Network() {
     const [allGroups, setAllGroups] = useState<GroupResponse[]>([])
     const [filteredGroups, setFilteredGroups] = useState<GroupResponse[]>([])
 
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
         const fetchData = async () => {
+            setLoading(true)
             const subgraph = new SemaphoreSubgraph(network)
 
             const groups = await subgraph.getGroups({
@@ -24,6 +27,7 @@ export default function Network() {
 
             setAllGroups(groups)
             setFilteredGroups(groups.slice())
+            setLoading(false)
         }
 
         fetchData()
@@ -38,7 +42,11 @@ export default function Network() {
         [allGroups]
     )
 
-    return (
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
         allGroups && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
                 <SearchBar className="mb-6" placeholder="Group ID" onChange={filterGroups} />

apps/explorer/src/app/globals.css

@@ -25,3 +25,19 @@ body {
         text-wrap: balance;
     }
 }
+
+.loader {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    border-top: 2px solid #3555df;
+    border-right: 2px solid transparent;
+    animation: spin 1s linear infinite;
+    z-index: 20;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}