All files / src/utils use-instant-transition.ts

100% Statements 19/19
100% Branches 0/0
100% Functions 6/6
100% Lines 16/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2830x 30x 30x 30x 30x   30x 18x 18x   18x       4x 4x       18x 2x 2x 2x 2x        
import sync from "framesync"
import { useEffect } from "react"
import { useInstantLayoutTransition } from "../projection/use-instant-layout-transition"
import { useForceUpdate } from "./use-force-update"
import { instantAnimationState } from "./use-instant-transition-state"
 
export function useInstantTransition() {
    const [forceUpdate, forcedRenderCount] = useForceUpdate()
    const startInstantLayoutTransition = useInstantLayoutTransition()
 
    useEffect(() => {
        /**
         * Unblock after two animation frames, otherwise this will unblock too soon.
         */
        sync.postRender(() =>
            sync.postRender(() => (instantAnimationState.current = false))
        )
    }, [forcedRenderCount])
 
    return (callback: () => void) => {
        startInstantLayoutTransition(() => {
            instantAnimationState.current = true
            forceUpdate()
            callback()
        })
    }
}