fix: also remove RTG from scrim too

washingtonpost · Jun 6, 2024 · 59531b6 · 59531b6
1 parent ddebd88
commit 59531b6
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/packages/kit/src/scrim/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useTransition } from "react";
 import { styled, theme, css as wpCSS } from "../theme";
 import type * as WPDS from "../theme";
 import type { Token } from "@stitches/react/types/theme";
@@ -63,21 +63,26 @@ export const Scrim = React.forwardRef<HTMLDivElement, ScrimProps>(
       }
     }, [open, lockScroll]);
 
+    const [isPending, startTransition] = useTransition();
     const [isMounted, setIsMounted] = React.useState(false);
 
     React.useEffect(() => {
-      if (open) {
-        setIsMounted(true);
-      }
+      startTransition(() => {
+        if (open) {
+          setIsMounted(true);
+        }
+      });
     }, [open]);
 
     const handleTransitionEnd = () => {
       if (!open) {
-        setIsMounted(false);
+        startTransition(() => {
+          setIsMounted(false);
+        });
       }
     };
 
-    return isMounted ? (
+    return isMounted || isPending ? (
       <StyledContainer
         data-state={open ? "open" : "closed"}
         ref={ref}