aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-20 16:14:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace empty state messages with spinners

Browse Source 
Replaced 'No X yet. Pull to refresh!' messages with spinning loaders for:
- No highlights yet (Me & Explore)
- No bookmarks yet (Me)
- No read articles yet (Me)
- No articles written yet (Me)
- No blog posts yet (Explore)

This provides better UX by showing an active loading state instead of
static empty state messages.
This commit is contained in:
Gigi
2025-10-15 16:11:05 +02:00
parent 401a8241bd
commit d5a24f0a46
2 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Explore.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useMemo } from 'react' import React, { useState, useEffect, useMemo } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate } from '@fortawesome/free-solid-svg-icons' import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
import IconButton from './IconButton' import IconButton from './IconButton'
import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons' import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
import { Hooks } from 'applesauce-react' import { Hooks } from 'applesauce-react'
@@ -320,8 +320,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
) )
} }
return filteredBlogPosts.length === 0 ? ( return filteredBlogPosts.length === 0 ? (
<div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)', padding: '2rem' }}> <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p>No blog posts yet. Pull to refresh!</p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
</div> </div>
) : ( ) : (
<div className="explore-grid"> <div className="explore-grid">
@@ -347,8 +347,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
) )
} }
return classifiedHighlights.length === 0 ? ( return classifiedHighlights.length === 0 ? (
<div className="explore-empty" style={{ gridColumn: '1/-1', textAlign: 'center', color: 'var(--text-secondary)', padding: '2rem' }}> <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p>No highlights yet. Pull to refresh!</p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
</div> </div>
) : ( ) : (
<div className="explore-grid"> <div className="explore-grid">

24
src/components/Me.tsx
View File

@@ -197,12 +197,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
) )
} }
return highlights.length === 0 ? ( return highlights.length === 0 ? (
<div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}> <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
{isOwnProfile
? 'No highlights yet. Pull to refresh!'
: 'No highlights yet. Pull to refresh!'}
</p>
</div> </div>
) : ( ) : (
<div className="highlights-list me-highlights-list"> <div className="highlights-list me-highlights-list">
@@ -230,8 +226,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
) )
} }
return allIndividualBookmarks.length === 0 ? ( return allIndividualBookmarks.length === 0 ? (
<div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}> <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p>No bookmarks yet. Pull to refresh!</p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
</div> </div>
) : ( ) : (
<div className="bookmarks-list"> <div className="bookmarks-list">
@@ -295,8 +291,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
) )
} }
return readArticles.length === 0 ? ( return readArticles.length === 0 ? (
<div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}> <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p>No read articles yet. Pull to refresh!</p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
</div> </div>
) : ( ) : (
<div className="explore-grid"> <div className="explore-grid">
@@ -321,12 +317,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
) )
} }
return writings.length === 0 ? ( return writings.length === 0 ? (
<div className="explore-empty" style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-secondary)' }}> <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
<p> <FontAwesomeIcon icon={faSpinner} spin size="2x" />
{isOwnProfile
? 'No articles written yet. Pull to refresh!'
: 'No articles written yet. Pull to refresh!'}
</p>
</div> </div>
) : ( ) : (
<div className="explore-grid"> <div className="explore-grid">