Fix "blank" screen on initial load of Transition component (#1823)

* use a "cancellable" microTask

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Expose the `value` from the `Combobox` and `Listbox` components render prop ([#1822](https://github.com/tailwindlabs/headlessui/pull/1822))
 - Improve `scroll lock` on iOS ([#1824](https://github.com/tailwindlabs/headlessui/pull/1824))
 - Fix maximum call stack size exceeded error on `Tab` component when using `as={Fragment}` ([#1826](https://github.com/tailwindlabs/headlessui/pull/1826))
+- Fix "blank" screen on initial load of `Transition` component ([#1823](https://github.com/tailwindlabs/headlessui/pull/1823))
 
 ## [1.6.6] - 2022-07-07
 

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -22,7 +22,6 @@ import {
 } from '../../utils/render'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { match } from '../../utils/match'
-import { microTask } from '../../utils/micro-task'
 import { useIsMounted } from '../../hooks/use-is-mounted'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useLatestValue } from '../../hooks/use-latest-value'
@@ -30,6 +29,7 @@ import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complet
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTransition } from '../../hooks/use-transition'
 import { useEvent } from '../../hooks/use-event'
+import { useDisposables } from '../../hooks/use-disposables'
 
 type ContainerElement = MutableRefObject<HTMLElement | null>
 
@@ -128,6 +128,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) {
   let doneRef = useLatestValue(done)
   let transitionableChildren = useRef<NestingContextValues['children']['current']>([])
   let mounted = useIsMounted()
+  let d = useDisposables()
 
   let unregister = useEvent((container: ContainerElement, strategy = RenderStrategy.Hidden) => {
     let idx = transitionableChildren.current.findIndex(({ el }) => el === container)
@@ -142,7 +143,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) {
       },
     })
 
-    microTask(() => {
+    d.microTask(() => {
       if (!hasChildren(transitionableChildren) && mounted.current) {
         doneRef.current?.()
       }

packages/@headlessui-react/src/utils/disposables.ts

@@ -1,3 +1,5 @@
+import { microTask } from './micro-task'
+
 export function disposables() {
   let disposables: Function[] = []
   let queue: Function[] = []
@@ -33,6 +35,18 @@ export function disposables() {
       return api.add(() => clearTimeout(timer))
     },
 
+    microTask(...args: Parameters<typeof microTask>) {
+      let task = { current: true }
+      microTask(() => {
+        if (task.current) {
+          args[0]()
+        }
+      })
+      return api.add(() => {
+        task.current = false
+      })
+    },
+
     add(cb: () => void) {
       disposables.push(cb)
       return () => {