fix(core): fix ui flashing (#7056)

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -33,9 +33,6 @@ export const root = style({
     '&[data-enable-animation="true"]': {
       transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s`,
     },
-    '&[data-is-floating="false"][data-transparent=true]': {
-      backgroundColor: 'transparent',
-    },
     '&[data-transition-state="exited"]': {
       // avoid focus on hidden panel
       visibility: 'hidden',

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -1,7 +1,14 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTransition } from 'react-transition-state';
 
 import * as styles from './resize-panel.css';
@@ -157,7 +164,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
     const [{ status }, toggle] = useTransition({
       timeout: animationTimeout,
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       toggle(open);
     }, [open]);
     return (