refactor: remove refresh spinner and text from pull-to-refresh

- Remove 'Refreshing...' text from indicator
- Remove spinner from pull-to-refresh (button already spins)
- Only show indicator when actively pulling, not when refreshing
- Simplify logic and improve UX consistency
This commit is contained in:
Gigi
2025-10-14 01:05:22 +02:00
parent e737b1f7f0
commit f05fb29c7b

View File

@@ -1,6 +1,6 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowDown, faSpinner } from '@fortawesome/free-solid-svg-icons'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
interface PullToRefreshIndicatorProps {
isPulling: boolean
@@ -17,8 +17,8 @@ const PullToRefreshIndicator: React.FC<PullToRefreshIndicatorProps> = ({
isRefreshing,
threshold = 80
}) => {
// Don't show if not pulling and not refreshing
if (!isPulling && !isRefreshing) return null
// Only show when actively pulling, not when refreshing
if (!isPulling) return null
const opacity = Math.min(pullDistance / threshold, 1)
const rotation = (pullDistance / threshold) * 180
@@ -27,31 +27,23 @@ const PullToRefreshIndicator: React.FC<PullToRefreshIndicatorProps> = ({
<div
className="pull-to-refresh-indicator"
style={{
opacity: isRefreshing ? 1 : opacity,
transform: `translateY(${isRefreshing ? 0 : -20 + pullDistance / 2}px)`
opacity,
transform: `translateY(${-20 + pullDistance / 2}px)`
}}
>
<div
className="pull-to-refresh-icon"
style={{
transform: isRefreshing ? 'none' : `rotate(${rotation}deg)`
transform: `rotate(${rotation}deg)`
}}
>
{isRefreshing ? (
<FontAwesomeIcon icon={faSpinner} spin />
) : (
<FontAwesomeIcon
icon={faArrowDown}
style={{ color: canRefresh ? 'var(--accent-color, #3b82f6)' : 'var(--text-secondary)' }}
/>
)}
<FontAwesomeIcon
icon={faArrowDown}
style={{ color: canRefresh ? 'var(--accent-color, #3b82f6)' : 'var(--text-secondary)' }}
/>
</div>
<div className="pull-to-refresh-text">
{isRefreshing
? 'Refreshing...'
: canRefresh
? 'Release to refresh'
: 'Pull to refresh'}
{canRefresh ? 'Release to refresh' : 'Pull to refresh'}
</div>
</div>
)