mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-06-04 09:41:13 +02:00
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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user