diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx index 0ecdb9cb34..405d832cb3 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx @@ -29,6 +29,7 @@ import { positionItems } from '../utils/position-items' import { canAggregate } from '../utils/can-aggregate' import { isInViewport } from '../utils/is-in-viewport' import ReviewPanelEmptyState from './review-panel-empty-state' +import useEventListener from '@/shared/hooks/use-event-listener' type Positions = Map type Aggregates = Map> @@ -97,7 +98,7 @@ const ReviewPanelCurrentFile: FC = () => { return () => { window.clearTimeout(timer) } - }, [state, updatePositions, view.viewport.from, view.viewport.to]) + }, [state, updatePositions]) useEffect(() => { const element = containerRef.current @@ -111,7 +112,7 @@ const ReviewPanelCurrentFile: FC = () => { } }, [view, updatePositions]) - useEffect(() => { + const buildEntries = useCallback(() => { if (ranges) { view.requestMeasure({ key: 'review-panel-position', @@ -175,7 +176,13 @@ const ReviewPanelCurrentFile: FC = () => { }, }) } - }, [view, threads, ranges, screenPosition, containerRef]) + }, [screenPosition, threads, view, ranges]) + + useEffect(() => { + buildEntries() + }, [buildEntries]) + + useEventListener('editor:viewport-changed', buildEntries) if (!rangesWithPositions) { return null diff --git a/services/web/frontend/js/features/source-editor/extensions/track-changes.ts b/services/web/frontend/js/features/source-editor/extensions/track-changes.ts index e91646f47d..6f82409f63 100644 --- a/services/web/frontend/js/features/source-editor/extensions/track-changes.ts +++ b/services/web/frontend/js/features/source-editor/extensions/track-changes.ts @@ -161,7 +161,23 @@ export const trackChanges = ( }, } }) - : [], + : ViewPlugin.define(view => { + let timer: number + + return { + update(update) { + if (update.viewportChanged) { + if (timer) { + window.clearTimeout(timer) + } + + timer = window.setTimeout(() => { + dispatchEvent(new Event('editor:viewport-changed')) + }, 25) + } + }, + } + }), // draw change decorations ViewPlugin.define<