feat: improve explorer ux (#20)

* fix(explorer): fix filtered groups search

* feat(explorer): add loader to pages

* chore(explorer): add website metadata

Author: vplasencia

apps/explorer/public/apple-icon.png

@@ -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/public/icon.svg

@@ -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,18 +27,26 @@ export default function Network() {
 
             setAllGroups(groups)
             setFilteredGroups(groups.slice())
+            setLoading(false)
         }
 
         fetchData()
     }, [])
 
-    const filterGroups = useCallback((groupId: string) => {
-        const groups = allGroups.filter((group) => (!groupId ? true : group.id.includes(groupId)))
+    const filterGroups = useCallback(
+        (groupId: string) => {
+            const groups = allGroups.filter((group) => (!groupId ? true : group.id.includes(groupId)))
 
-        setFilteredGroups(groups)
-    }, [])
+            setFilteredGroups(groups)
+        },
+        [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/public/social-media.png

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

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

@@ -16,7 +16,22 @@ const geistMono = localFont({
 
 export const metadata: Metadata = {
     title: "Semaphore Explorer",
-    description: "Discover Semaphore groups, view members and zero-knowledge proofs."
+    description: "Discover Semaphore groups, view members and zero-knowledge proofs.",
+    icons: { icon: "/icon.svg", apple: "/apple-icon.png" },
+    metadataBase: new URL("https://explorer.semaphore.pse.dev"),
+    openGraph: {
+        type: "website",
+        url: "https://explorer.semaphore.pse.dev",
+        title: "Semaphore Explorer",
+        description: "Discover Semaphore groups, view members and zero-knowledge proofs.",
+        siteName: "Semaphore Explorer",
+        images: [
+            {
+                url: "https://explorer.semaphore.pse.dev/social-media.png"
+            }
+        ]
+    },
+    twitter: { card: "summary_large_image", images: "https://explorer.semaphore.pse.dev/social-media.png" }
 }
 
 export default function RootLayout({