Sfoglia il codice sorgente

fix(demo): sidebar delayed closing (#589)

xiamidaxia 5 mesi fa
parent
commit
bcd8eb7da6

+ 5 - 2
apps/demo-fixed-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  * SPDX-License-Identifier: MIT
  */
  */
 
 
-import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, startTransition, useMemo } from 'react';
 
 
 import {
 import {
   PlaygroundEntityContext,
   PlaygroundEntityContext,
@@ -21,7 +21,10 @@ export const SidebarRenderer = () => {
   const { selection, playground, document } = useClientContext();
   const { selection, playground, document } = useClientContext();
   const refresh = useRefresh();
   const refresh = useRefresh();
   const handleClose = useCallback(() => {
   const handleClose = useCallback(() => {
-    setNodeId(undefined);
+    // Sidebar delayed closing
+    startTransition(() => {
+      setNodeId(undefined);
+    });
   }, []);
   }, []);
   const node = nodeId ? document.getNode(nodeId) : undefined;
   const node = nodeId ? document.getNode(nodeId) : undefined;
   /**
   /**

+ 5 - 2
apps/demo-free-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  * SPDX-License-Identifier: MIT
  */
  */
 
 
-import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, startTransition } from 'react';
 
 
 import {
 import {
   PlaygroundEntityContext,
   PlaygroundEntityContext,
@@ -21,7 +21,10 @@ export const SidebarRenderer = () => {
   const { selection, playground, document } = useClientContext();
   const { selection, playground, document } = useClientContext();
   const refresh = useRefresh();
   const refresh = useRefresh();
   const handleClose = useCallback(() => {
   const handleClose = useCallback(() => {
-    setNodeId(undefined);
+    // Sidebar delayed closing
+    startTransition(() => {
+      setNodeId(undefined);
+    });
   }, []);
   }, []);
   const node = nodeId ? document.getNode(nodeId) : undefined;
   const node = nodeId ? document.getNode(nodeId) : undefined;
   /**
   /**