feat(post): improve JSON preview responsiveness and layout

This commit addresses UX feedback on the JSON preview feature:

- Reduced update interval from 2000ms to 200ms for much more responsive UI
- Moved JSON preview below relay list for better visual flow
- Increased max-height from 256px to 400px for better visibility
- Separated JSON update logic into dedicated effect for cleaner code
- JSON preview now feels instant when typing (10x faster updates)

The JSON preview is now much more pleasant to use and doesn't feel
laggy when editing content.
This commit is contained in:
Claude
2026-01-21 10:41:24 +00:00
parent 83da267e76
commit 58027e950b

View File

@@ -308,13 +308,19 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
if (editorRef.current) {
setIsEditorEmpty(editorRef.current.isEmpty());
}
// Update draft event JSON preview
if (settings.showEventJson) {
generateDraftEventJson();
}
}, 2000);
return () => clearInterval(timer);
}, [saveDraft, settings.showEventJson, generateDraftEventJson]);
}, [saveDraft]);
// Update JSON preview more frequently for responsive UI
useEffect(() => {
if (!settings.showEventJson) return;
const timer = setInterval(() => {
generateDraftEventJson();
}, 200);
return () => clearInterval(timer);
}, [settings.showEventJson, generateDraftEventJson]);
// Blossom upload for attachments
const { open: openUpload, dialog: uploadDialog } = useBlossomUpload({
@@ -763,20 +769,6 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
)}
</Button>
</div>
{/* Event JSON Preview */}
{settings.showEventJson && draftEventJson && (
<div className="rounded-lg border border-border overflow-hidden">
<div className="bg-muted/50 px-3 py-2 text-xs font-medium text-muted-foreground border-b">
Event JSON (Draft - Unsigned)
</div>
<div className="max-h-64">
<CopyableJsonViewer
json={JSON.stringify(draftEventJson, null, 2)}
/>
</div>
</div>
)}
</>
) : (
<>
@@ -904,6 +896,20 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
)}
</div>
{/* Event JSON Preview */}
{!showPublishedPreview && settings.showEventJson && draftEventJson && (
<div className="rounded-lg border border-border overflow-hidden">
<div className="bg-muted/50 px-3 py-2 text-xs font-medium text-muted-foreground border-b">
Event JSON (Draft - Unsigned)
</div>
<div className="overflow-y-auto" style={{ maxHeight: "400px" }}>
<CopyableJsonViewer
json={JSON.stringify(draftEventJson, null, 2)}
/>
</div>
</div>
)}
{/* Upload dialog */}
{uploadDialog}
</div>