From 4c2626f3c4699c96e97fa8cad437e0c60e736ded Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 2 Oct 2025 23:54:19 +0200
Subject: [PATCH] feat(ui): add spinner to content loading state

- Replace text with FontAwesome spinner icon
- Add loading-spinner styles for proper alignment
- Improve visual feedback during content fetch
---
 src/components/ContentPanel.tsx |  7 ++++++-
 src/index.css                   | 11 +++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 4a2515a5..fc5ffac1 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 
 interface ContentPanelProps {
   loading: boolean
@@ -22,7 +24,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({ loading, title, html, markd
   if (loading) {
     return (
       <div className="content-panel loading">
-        <p>Loading content…</p>
+        <div className="loading-spinner">
+          <FontAwesomeIcon icon={faSpinner} spin />
+          <span>Loading content…</span>
+        </div>
       </div>
     )
   }
diff --git a/src/index.css b/src/index.css
index c0e24394..334a4923 100644
--- a/src/index.css
+++ b/src/index.css
@@ -287,6 +287,17 @@ body {
   color: #888;
 }
 
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #888;
+}
+
+.loading-spinner svg {
+  font-size: 1.2rem;
+}
+
 .content-title {
   margin: 0 0 1rem 0;
 }