From 6dde0eb22038a8be2c04d36846d63a7effeb03ba Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 15:35:17 +0200
Subject: [PATCH] feat: Explore - replace spinner with skeleton loaders

---
 src/components/Explore.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx
index 7e3daa54..77bd2cac 100644
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner, faExclamationCircle, faNewspaper, faPenToSquare, faHighlighter, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
+import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
@@ -352,9 +353,23 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
   if (loading && !hasData) {
     return (
-      <div className="explore-container">
-        <div className="explore-loading">
-          <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+      <div className="explore-container" aria-busy="true">
+        <div className="explore-header">
+          <h1>
+            <FontAwesomeIcon icon={faNewspaper} />
+            Explore
+          </h1>
+        </div>
+        <div className="explore-grid">
+          {activeTab === 'writings' ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <BlogPostSkeleton key={i} />
+            ))
+          ) : (
+            Array.from({ length: 8 }).map((_, i) => (
+              <HighlightSkeleton key={i} />
+            ))
+          )}
         </div>
       </div>
     )