mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-14 22:23:42 +01:00
Merge pull request #14059 from overleaf/td-review-panel-smoother-chrome
React review panel: fix regression that made animation jerky on Chrome GitOrigin-RevId: c1d9fa00d478fa71d94ff705ddfcc12bab0b2767
This commit is contained in:
+5
-6
@@ -39,7 +39,7 @@ export const dispatchReviewPanelLayout = (force = false) => {
|
|||||||
|
|
||||||
const scheduleDispatchReviewPanelLayout = debounce(
|
const scheduleDispatchReviewPanelLayout = debounce(
|
||||||
dispatchReviewPanelLayout,
|
dispatchReviewPanelLayout,
|
||||||
50
|
10
|
||||||
)
|
)
|
||||||
|
|
||||||
export type ChangeManager = {
|
export type ChangeManager = {
|
||||||
@@ -307,11 +307,10 @@ export const createChangeManager = (
|
|||||||
if (changed) {
|
if (changed) {
|
||||||
dispatchEditorEvent('track-changes:visibility_changed')
|
dispatchEditorEvent('track-changes:visibility_changed')
|
||||||
}
|
}
|
||||||
dispatchReviewPanelLayout()
|
// Ensure the layout is updated once the review panel entries have
|
||||||
// Ensure the layout is updated again once the review panel entries
|
// updated in the React review panel. The use of a timeout is bad but
|
||||||
// have updated in the React review panel. The use of a timeout is bad
|
// the timings are a bit of a mess and will be improved when the review
|
||||||
// but the timings are a bit of a mess and will be improved when the
|
// panel state is migrated away from Angular
|
||||||
// review panel state is migrated away from Angular
|
|
||||||
scheduleDispatchReviewPanelLayout()
|
scheduleDispatchReviewPanelLayout()
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,25 +36,26 @@ function AutoExpandingTextArea({
|
|||||||
...rest
|
...rest
|
||||||
}: AutoExpandingTextAreaProps) {
|
}: AutoExpandingTextAreaProps) {
|
||||||
const ref = useRef<HTMLTextAreaElement>(null)
|
const ref = useRef<HTMLTextAreaElement>(null)
|
||||||
|
const isFirstResizeRef = useRef(true)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!ref.current || !onResize || !('ResizeObserver' in window)) {
|
if (!ref.current || !onResize || !('ResizeObserver' in window)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let isFirstResize = true
|
|
||||||
|
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
// Ignore the resize that is triggered when the element is first
|
// Ignore the resize that is triggered when the element is first
|
||||||
// inserted into the DOM
|
// inserted into the DOM
|
||||||
if (isFirstResize) {
|
if (isFirstResizeRef.current) {
|
||||||
isFirstResize = false
|
isFirstResizeRef.current = false
|
||||||
} else {
|
} else {
|
||||||
// Prevent errors like "ResizeObserver loop completed with undelivered
|
// Prevent errors like "ResizeObserver loop completed with undelivered
|
||||||
// notifications" that occur if onResize does something complicated.
|
// notifications" that occur if onResize does something complicated.
|
||||||
// The cost of this is that onResize lags one frame behind, but it's
|
// The cost of this is that onResize lags one frame behind, but it's
|
||||||
// unlikely to matter.
|
// unlikely to matter.
|
||||||
window.requestAnimationFrame(onResize)
|
|
||||||
|
// Wrap onResize to prevent extra parameters being passed
|
||||||
|
window.requestAnimationFrame(() => onResize())
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user