From 074c3c0b7f786e406ecf4f7472121932c86a8895 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Wed, 21 Jan 2026 17:22:07 +0100
Subject: [PATCH] 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>
---
 src/components/PostViewer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/PostViewer.tsx b/src/components/PostViewer.tsx
index 0d12741..af75d4a 100644
--- a/src/components/PostViewer.tsx
+++ b/src/components/PostViewer.tsx
@@ -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" />