refactor: useLayoutEffect replace useEffect

Author: xieliuduo

frontend/src/app/hooks/useCacheWidthHeight.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import useResizeObserver from './useResizeObserver';
 
 export const useCacheWidthHeight = (
@@ -33,7 +33,7 @@ export const useCacheWidthHeight = (
     refreshMode: 'debounce',
     refreshRate: 20,
   });
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (width > 0) {
       setCacheW(width);
       setCacheH(height);

frontend/src/app/hooks/useWidgetRowHeight.ts

@@ -21,14 +21,14 @@ import {
   BASE_VIEW_WIDTH,
   MIN_ROW_HEIGHT,
 } from 'app/pages/DashBoardPage/constants';
-import { useEffect, useMemo, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import useResizeObserver from './useResizeObserver';
 
 export const useWidgetRowHeight = () => {
   const [cacheW, setCacheW] = useState(0);
   const { ref, width = 0 } = useResizeObserver<HTMLDivElement>();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (width > 0) {
       setCacheW(width);
     }

frontend/src/app/pages/DashBoardPage/pages/Board/FreeDashboard/FreeBoardCore.tsx

@@ -134,11 +134,11 @@ const Wrap = styled.div`
       overflow-y: hidden;
 
       .empty {
-        height: 100%;
         display: flex;
         flex: 1;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+        height: 100%;
       }
     }
     .grid-background::-webkit-scrollbar {