From 0541d9dd69fbc617657258dba7bcd7220168187c Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 16 Jul 2026 04:01:29 +0000 Subject: [PATCH] Keep Fetch button a fixed width while loading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stop swapping the label to "Fetching…" on tap — that grew the button wider mid-interaction. The label stays "Fetch"; only the icon changes, from the plus to a spinner (both 12px, using the shared .explore-spin class), so loading still reads clearly but the button never resizes. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_0162M8cx8jXKS1S4gwrDempX --- src/components/explore/CollectionExplorer.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/explore/CollectionExplorer.tsx b/src/components/explore/CollectionExplorer.tsx index 34a0fc9..642b18a 100644 --- a/src/components/explore/CollectionExplorer.tsx +++ b/src/components/explore/CollectionExplorer.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; -import { Pause, Play, FilePenLine, Trash2, X, Plus } from 'lucide-react'; +import { Pause, Play, FilePenLine, Trash2, X, Plus, Loader2 } from 'lucide-react'; import { listRecordsPage, type AtRecord } from '@/utils/atproto/pdsClient'; import { msUntilBudget, @@ -669,8 +669,15 @@ function CollectionList({ }} title={`Fetch the next ${RECORDS_PER_PAGE} records`} > - - {loading ? 'Fetching…' : 'Fetch'} + {/* Keep the label fixed at "Fetch" and only swap the icon for a + spinner while loading — both icons are 12px, so the button + never changes width when tapped. */} + {loading ? ( + + ) : ( + + )} + Fetch )}