From e71039196216b72c4be598c510156dde00f53b19 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:02:01 +0100
Subject: [PATCH] style(ui): replace all loading text with spinners per
 fontawesome rule

---
 .cursor/rules/fontawesome.mdc      | 4 +++-
 src/App.tsx                        | 8 +++++++-
 src/components/ContentPanel.tsx    | 1 -
 src/components/HighlightsPanel.tsx | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.cursor/rules/fontawesome.mdc b/.cursor/rules/fontawesome.mdc
index ac84b846..71a7c554 100644
--- a/.cursor/rules/fontawesome.mdc
+++ b/.cursor/rules/fontawesome.mdc
@@ -3,4 +3,6 @@ description: when creating or modifying UI elements, especially related to icons
 alwaysApply: false
 ---
 
-We use FontAwesome. If you can use a fa-icon (instead of text) use a fa-icon. Always strive to keep the UI modern, beautiful, and minimalistic. Shy away from using too many colors, borders, glow, and animations.
\ No newline at end of file
+We use FontAwesome. If you can use a fa-icon (instead of text) use a fa-icon. Always strive to keep the UI modern, beautiful, and minimalistic. Shy away from using too many colors, borders, glow, and animations.
+
+Never write "Loading" - always show a spinner, and just a spinner.
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 783912d0..5505e418 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { EventStoreProvider, AccountsProvider } from 'applesauce-react'
 import { EventStore } from 'applesauce-core'
 import { AccountManager } from 'applesauce-accounts'
@@ -104,7 +106,11 @@ function App() {
   }, [])
 
   if (!eventStore || !accountManager || !relayPool) {
-    return <div>Loading...</div>
+    return (
+      <div className="loading">
+        <FontAwesomeIcon icon={faSpinner} spin />
+      </div>
+    )
   }
 
   return (
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 01bd636e..43a9b3bd 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -144,7 +144,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <div className="reader loading">
         <div className="loading-spinner">
           <FontAwesomeIcon icon={faSpinner} spin />
-          <span>Loading content…</span>
         </div>
       </div>
     )
diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx
index f615f64a..d8293aa8 100644
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -199,7 +199,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
 
       {loading ? (
         <div className="highlights-loading">
-          <p>Loading highlights...</p>
+          <FontAwesomeIcon icon={faHighlighter} spin />
         </div>
       ) : filteredHighlights.length === 0 ? (
         <div className="highlights-empty">