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 = ({ loading, title, html, markd if (loading) { return (
-

Loading content…

+
+ + Loading content… +
) } 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; }