From c7c82954add2d6179d94a0aad4b97c56c5752f64 Mon Sep 17 00:00:00 2001 From: Gigi Date: Tue, 14 Oct 2025 00:03:56 +0200 Subject: [PATCH] feat(highlights): force synchronous render for immediate highlight display - Use flushSync to force React to render synchronously after highlight creation - Eliminates render cycle delay for instant visual feedback - Highlights now appear immediately in the text when created --- src/hooks/useHighlightCreation.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/hooks/useHighlightCreation.ts b/src/hooks/useHighlightCreation.ts index 9c9c5b86..2539b8cb 100644 --- a/src/hooks/useHighlightCreation.ts +++ b/src/hooks/useHighlightCreation.ts @@ -1,4 +1,5 @@ import { useCallback, useRef } from 'react' +import { flushSync } from 'react-dom' import { RelayPool } from 'applesauce-relay' import { NostrEvent } from 'nostr-tools' import { IEventStore } from 'applesauce-core' @@ -84,7 +85,11 @@ export const useHighlightCreation = ({ } highlightButtonRef.current?.clearSelection() - onHighlightCreated(newHighlight) + + // Force synchronous render to show highlight immediately + flushSync(() => { + onHighlightCreated(newHighlight) + }) } catch (error) { console.error('❌ Failed to create highlight:', error) // Re-throw to allow parent to handle