remove flash from dashboard

interface/src/app/main/Dashboard.tsx

@@ -14,7 +14,6 @@ import {
   IconButton,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip,
   Typography
 } from '@mui/material';
 
@@ -22,7 +21,13 @@ import { Body, Cell, Row, Table } from '@table-library/react-table-library/table
 import { useTheme } from '@table-library/react-table-library/theme';
 import { CellTree, useTree } from '@table-library/react-table-library/tree';
 import { useRequest } from 'alova/client';
-import { FormLoader, MessageBox, SectionContent, useLayoutTitle } from 'components';
+import {
+  ButtonTooltip,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval, usePersistState } from 'utils';
@@ -55,8 +60,7 @@ const Dashboard = () => {
   const {
     data,
     send: fetchDashboard,
-    error,
-    loading
+    error
   } = useRequest(readDashboard, {
     initialData: { connected: false, nodes: [] }
   }).onSuccess((event) => {
@@ -224,10 +228,6 @@ const Dashboard = () => {
       return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
     }
 
-    if (loading) {
-      return;
-    }
-
     const hasFavEntities = data.nodes.filter(
       (item: DashboardItem) => item.id <= 90
     ).length;
@@ -264,20 +264,20 @@ const Dashboard = () => {
               exclusive
               onChange={handleShowAll}
             >
-              <Tooltip placement="top" title={LL.ALLVALUES()} arrow>
+              <ButtonTooltip title={LL.ALLVALUES()} arrow>
                 <ToggleButton value={true}>
                   <UnfoldMoreIcon sx={{ fontSize: 18 }} />
                 </ToggleButton>
-              </Tooltip>
-              <Tooltip placement="top" title={LL.COMPACT()} arrow>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.COMPACT()} arrow>
                 <ToggleButton value={false}>
                   <UnfoldLessIcon sx={{ fontSize: 18 }} />
                 </ToggleButton>
-              </Tooltip>
+              </ButtonTooltip>
             </ToggleButtonGroup>
-            <Tooltip placement="top" title={LL.DASHBOARD_1()} arrow>
+            <ButtonTooltip title={LL.DASHBOARD_1()} arrow>
               <HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
-            </Tooltip>
+            </ButtonTooltip>
 
             <Box
               padding={1}
@@ -313,13 +313,11 @@ const Dashboard = () => {
                             <>
                               <Cell>{showName(di)}</Cell>
                               <Cell>
-                                <Tooltip
-                                  placement="left"
+                                <ButtonTooltip
                                   title={formatValue(LL, di.dv?.v, di.dv?.u)}
-                                  arrow
                                 >
                                   <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
-                                </Tooltip>
+                                </ButtonTooltip>
                               </Cell>
 
                               <Cell>

interface/src/app/main/Devices.tsx

@@ -35,11 +35,7 @@ import {
   List,
   ListItem,
   ListItemText,
-  Tooltip,
-  type TooltipProps,
-  Typography,
-  styled,
-  tooltipClasses
+  Typography
 } from '@mui/material';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
@@ -57,7 +53,12 @@ import { useTheme } from '@table-library/react-table-library/theme';
 import type { Action, State } from '@table-library/react-table-library/types/common';
 import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
-import { MessageBox, SectionContent, useLayoutTitle } from 'components';
+import {
+  ButtonTooltip,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';
@@ -221,20 +222,6 @@ const Devices = () => {
     }
   ]);
 
-  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
-    <Tooltip {...props} arrow classes={{ popper: className }} />
-  ))(({ theme }) => ({
-    [`& .${tooltipClasses.arrow}`]: {
-      color: theme.palette.success.main
-    },
-    [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: theme.palette.success.main,
-      color: 'rgba(0, 0, 0, 0.87)',
-      boxShadow: theme.shadows[1],
-      fontSize: 10
-    }
-  }));
-
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;