fix(electron): fix tab view blink issue on open new tab (#7748)

fix AF-1197

packages/frontend/electron/renderer/shell/index.css

@@ -0,0 +1,16 @@
+html,
+html[data-active='false'] {
+  opacity: 0;
+}
+
+html[data-active='false'] {
+  transition: opacity 0.01s 0.2s;
+}
+
+html[data-active='false'] * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='true'] {
+  opacity: 1;
+}

packages/frontend/electron/renderer/shell/index.tsx

@@ -2,6 +2,7 @@ import 'setimmediate';
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 import '@affine/core/bootstrap/preload';
+import './index.css';
 
 import { ThemeProvider } from '@affine/component/theme-provider';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
@@ -41,11 +42,15 @@ async function main() {
   const handleFullscreen = (fullscreen: boolean | undefined) => {
     document.documentElement.dataset.fullscreen = String(fullscreen);
   };
+  const handleActive = (active: boolean | undefined) => {
+    document.documentElement.dataset.active = String(active);
+  };
 
   apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
   apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
   events?.ui.onMaximized(handleMaximized);
   events?.ui.onFullScreen(handleFullscreen);
+  events?.ui.onTabShellViewActiveChange(handleActive);
 
   await loadLanguage();
   mountApp();

packages/frontend/electron/renderer/shell/shell.css.ts

@@ -1,25 +1,16 @@
 import { cssVar } from '@toeverything/theme';
-import { createVar, globalStyle, style } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 
 export const sidebarOffsetVar = createVar();
 
 export const root = style({
   width: '100vw',
   height: '100vh',
-  opacity: 1,
   display: 'flex',
-  transition: 'opacity 0.1s',
   background: cssVar('backgroundPrimaryColor'),
   selectors: {
-    '&[data-active="false"]': {
-      opacity: 0,
-    },
     '&[data-translucent="true"]': {
       background: 'transparent',
     },
   },
 });
-
-globalStyle(`${root}[data-active="false"] *`, {
-  ['WebkitAppRegion' as string]: 'no-drag !important',
-});

packages/frontend/electron/renderer/shell/shell.tsx

@@ -1,38 +1,16 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { AppTabsHeader } from '@affine/core/modules/app-tabs-header';
-import { events } from '@affine/electron-api';
-import { useEffect, useState } from 'react';
 
 import * as styles from './shell.css';
 
-const useIsShellActive = () => {
-  const [active, setActive] = useState(false);
-
-  useEffect(() => {
-    const unsub = events?.ui.onTabShellViewActiveChange(active => {
-      setActive(active);
-    });
-    return () => {
-      unsub?.();
-    };
-  });
-
-  return active;
-};
-
 export function ShellRoot() {
-  const active = useIsShellActive();
   const { appSettings } = useAppSettingHelper();
   const translucent =
     environment.isDesktop &&
     environment.isMacOs &&
     appSettings.enableBlurBackground;
   return (
-    <div
-      className={styles.root}
-      data-translucent={translucent}
-      data-active={active}
-    >
+    <div className={styles.root} data-translucent={translucent}>
       <AppTabsHeader mode="shell" />
     </div>
   );