Fix relay list flickering during post publish (#187)

* fix: prevent relay list flicker during post publishing

Fixed the relay list flickering issue that occurred while publishing posts:
- Changed overflow-y-auto to overflow-y-scroll to keep scrollbar visible
- Added fixed width (w-6) to status indicator container to prevent layout shifts
- Status indicators no longer cause content reflow when changing states

* fix: show icon for all relay states to prevent layout shifts

Show a Circle icon for pending/unpublished relays so there's always
an icon present. This keeps the status indicator container at a
consistent width and prevents flickering when publishing.

- Added Circle icon import
- Show Circle icon for "pending" state
- Reverted to overflow-y-auto (no longer needed with fixed container)
- Status indicator always has fixed width with centered icon

* refactor: use muted color for pending and publishing relay states

Changed publishing spinner from blue to muted to match pending state,
creating a more consistent visual hierarchy where only success (green)
and error (red) states use color.

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
2026-01-21 17:22:07 +01:00
committed by GitHub
parent 66618fb150
commit 074c3c0b7f

View File

@@ -10,6 +10,7 @@ import {
Server,
ServerOff,
Plus,
Circle,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "./ui/button";
@@ -809,9 +810,12 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
</div>
{/* Status indicator */}
<div className="flex-shrink-0">
<div className="flex-shrink-0 w-6 flex items-center justify-center">
{relay.status === "pending" && (
<Circle className="h-4 w-4 text-muted-foreground" />
)}
{relay.status === "publishing" && (
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
)}
{relay.status === "success" && (
<Check className="h-4 w-4 text-green-500" />