From 5667e84f35437df87983fbc9bc4dd16707fcca6a Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 6 Sep 2022 13:37:55 +0200
Subject: [PATCH] Fix "blank" screen on initial load of `Transition` component
 (#1823)

* use a "cancellable" microTask

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md            |  1 +
 .../src/components/transitions/transition.tsx      |  5 +++--
 .../@headlessui-react/src/utils/disposables.ts     | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 5b361a8..79f304b 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/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
 
diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
index 40a4a9c..ccb0fdf 100644
--- a/packages/@headlessui-react/src/components/transitions/transition.tsx
+++ b/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?.()
       }
diff --git a/packages/@headlessui-react/src/utils/disposables.ts b/packages/@headlessui-react/src/utils/disposables.ts
index 0e3a755..686f4ff 100644
--- a/packages/@headlessui-react/src/utils/disposables.ts
+++ b/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 () => {