Merge pull request #945 from xieliuduo/dev-renderAuto

autoBoard first render farst

Author: scottsut

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,11 +21,18 @@ import {
   BASE_VIEW_WIDTH,
   MIN_ROW_HEIGHT,
 } from 'app/pages/DashBoardPage/constants';
-import { useMemo } from 'react';
-import { useCacheWidthHeight } from './useCacheWidthHeight';
+import { useLayoutEffect, useMemo, useState } from 'react';
+import useResizeObserver from './useResizeObserver';
 
 export const useWidgetRowHeight = () => {
-  const { ref, cacheW } = useCacheWidthHeight();
+  const [cacheW, setCacheW] = useState(0);
+  const { ref, width = 0 } = useResizeObserver<HTMLDivElement>();
+
+  useLayoutEffect(() => {
+    if (width > 0) {
+      setCacheW(width);
+    }
+  }, [width]);
   const widgetRowHeight = useMemo(() => {
     let dynamicHeight = (cacheW * BASE_ROW_HEIGHT) / BASE_VIEW_WIDTH;
     return Math.max(dynamicHeight, MIN_ROW_HEIGHT);

frontend/src/app/pages/DashBoardPage/components/WidgetCore/ButtonWidget/QueryWidget.tsx

@@ -43,15 +43,14 @@ export const QueryWidget: React.FC<CompProps> = () => {
 };
 
 const Wrap = styled.div<FontConfig & { background: string }>`
-  cursor: pointer;
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   font: ${p =>
     `${p.fontStyle} ${p.fontWeight} ${p.fontSize}px ${p.fontFamily}`};
   color: ${p => p.color};
-
+  cursor: pointer;
   &:hover {
     background: ${p =>
       getLuminance(p.background) > 0.5

frontend/src/app/pages/DashBoardPage/components/WidgetCore/ButtonWidget/ResetWidget.tsx

@@ -43,15 +43,14 @@ export const ResetWidget: React.FC<CompProps> = () => {
 };
 
 const Wrap = styled.div<FontConfig & { background: string }>`
-  cursor: pointer;
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   font: ${p =>
     `${p.fontStyle} ${p.fontWeight} ${p.fontSize}px ${p.fontFamily}`};
   color: ${p => p.color};
-
+  cursor: pointer;
   &:hover {
     background: ${p =>
       getLuminance(p.background) > 0.5

frontend/src/app/pages/DashBoardPage/components/WidgetCore/ContainerWidget/TabWidget/WidgetOfTab.tsx

@@ -84,10 +84,10 @@ interface WrapProps {
 const Wrap = styled.div<WrapProps>`
   position: relative;
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
   display: flex;
   flex: 1;
+  width: 100%;
+  height: 100%;
   border: ${p => p.border};
 
   & .widget-tool-bar {
@@ -104,8 +104,8 @@ const Wrap = styled.div<WrapProps>`
 `;
 const ItemContainer = styled.div`
   position: absolute;
-  display: flex;
   z-index: 10;
+  display: flex;
   width: 100%;
   height: 100%;
 `;

frontend/src/app/pages/DashBoardPage/components/WidgetCore/DataChartWidget/index.tsx

@@ -171,7 +171,7 @@ const ChartFrameBox = styled.div`
   overflow: hidden;
 `;
 const Wrap = styled.div`
+  position: relative;
   display: flex;
   flex: 1;
-  position: relative;
 `;

frontend/src/app/pages/DashBoardPage/pages/Board/AutoDashboard/AutoBoardCore.tsx

@@ -310,7 +310,7 @@ const StyledContainer = styled(StyledBackground)`
   .empty {
     display: flex;
     flex: 1;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 `;

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 {