fix: layout

Author: foodaka

src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx

@@ -1,56 +1,46 @@
 import { Trans } from '@lingui/macro';
 import { Box, Button, CircularProgress, Typography } from '@mui/material';
-import React, { useEffect, useRef, useState } from 'react';
+import { ParentSize } from '@visx/responsive';
+import React from 'react';
 
 import { GraphLegend } from './GraphLegend';
-import { MeritApyDataItem, MeritApyGraph, MeritApyPlaceholderChart } from './MeritApyGraph';
+import { MeritApyDataItem, MeritApyGraph } from './MeritApyGraph';
 
-// Stable chart component that avoids ParentSize recalculations
-const StableChart = React.memo(
+const ResponsiveChart = React.memo(
   ({
     data,
     lineColor,
     showAverage,
+    width,
+    height,
   }: {
     data: MeritApyDataItem[];
     lineColor: string;
     showAverage: boolean;
+    width: number;
+    height: number;
   }) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [chartWidth, setChartWidth] = useState(600); // Default width
-    const CHART_HEIGHT = 155;
-
-    useEffect(() => {
-      // Calculate width once when component mounts
-      if (containerRef.current) {
-        const width = containerRef.current.offsetWidth;
-        if (width > 0 && width !== chartWidth) {
-          setChartWidth(width);
-        }
-      }
-    }, []); // Only run once on mount
-
-    // Memoize the chart to prevent re-renders when data hasn't actually changed
+    // Memoize the chart to prevent unnecessary re-renders
     const chartContent = React.useMemo(() => {
-      return data.length > 0 ? (
+      // Early return if dimensions are too small
+      if (width < 10) return null;
+
+      return (
         <MeritApyGraph
-          width={chartWidth}
-          height={CHART_HEIGHT}
+          width={width}
+          height={height}
           data={data}
           lineColor={lineColor}
           showAverage={showAverage}
         />
-      ) : (
-        <MeritApyPlaceholderChart height={CHART_HEIGHT} width={chartWidth} />
       );
-    }, [data, chartWidth, lineColor, showAverage]);
+    }, [data, width, height, lineColor, showAverage]);
 
     return (
       <Box
-        ref={containerRef}
         sx={{
           width: '100%',
-          height: CHART_HEIGHT,
+          height: height,
           position: 'relative',
         }}
       >
@@ -60,7 +50,7 @@ const StableChart = React.memo(
   }
 );
 
-StableChart.displayName = 'StableChart';
+ResponsiveChart.displayName = 'ResponsiveChart';
 
 export type MeritApyGraphContainerProps = {
   data?: MeritApyDataItem[];
@@ -70,6 +60,7 @@ export type MeritApyGraphContainerProps = {
   lineColor?: string;
   showAverage?: boolean;
   title?: string;
+  height?: number;
 };
 
 /**
@@ -84,8 +75,8 @@ export const MeritApyGraphContainer = ({
   lineColor = '#2EBAC6',
   showAverage = true,
   title = 'Merit APY',
+  height = 155,
 }: MeritApyGraphContainerProps): JSX.Element => {
-  const CHART_HEIGHT = 155;
   const CHART_HEIGHT_LOADING_FIX = 3;
 
   // Legend data
@@ -94,7 +85,7 @@ export const MeritApyGraphContainer = ({
   const graphLoading = (
     <Box
       sx={{
-        height: CHART_HEIGHT + CHART_HEIGHT_LOADING_FIX,
+        height: height + CHART_HEIGHT_LOADING_FIX,
         width: 'auto',
         display: 'flex',
         flexDirection: 'column',
@@ -112,7 +103,7 @@ export const MeritApyGraphContainer = ({
   const graphError = (
     <Box
       sx={{
-        height: CHART_HEIGHT + CHART_HEIGHT_LOADING_FIX,
+        height: height + CHART_HEIGHT_LOADING_FIX,
         width: 'auto',
         display: 'flex',
         flexDirection: 'column',
@@ -148,11 +139,21 @@ export const MeritApyGraphContainer = ({
         <GraphLegend labels={legendFields} />
       </Box>
 
-      <Box sx={{ flex: 1, minHeight: CHART_HEIGHT, width: '100%' }}>
+      <Box sx={{ flex: 1, minHeight: height, width: '100%' }}>
         {loading && graphLoading}
         {error && graphError}
         {!loading && !error && (
-          <StableChart data={data} lineColor={lineColor} showAverage={showAverage} />
+          <ParentSize>
+            {({ width }) => (
+              <ResponsiveChart
+                data={data}
+                lineColor={lineColor}
+                showAverage={showAverage}
+                width={width}
+                height={height}
+              />
+            )}
+          </ParentSize>
         )}
       </Box>
     </Box>

src/modules/sGho/SGhoDepositPanel.tsx

@@ -16,7 +16,7 @@ import {
 } from '@mui/material';
 import { BigNumber } from 'ethers';
 import { formatEther, formatUnits } from 'ethers/lib/utils';
-import React, { memo } from 'react';
+import React from 'react';
 import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
@@ -30,46 +30,9 @@ import { useStakeTokenAPR } from 'src/hooks/useStakeTokenAPR';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { GENERAL } from 'src/utils/events';
 
-import { MeritApyDataItem } from '../reserve-overview/graphs/MeritApyGraph';
 import { MeritApyGraphContainer } from '../reserve-overview/graphs/MeritApyGraphContainer';
 import { StakeActionBox } from '../staking/StakeActionBox';
 
-// Memoized chart component to prevent unnecessary re-renders
-const MemoizedMeritApyChart = memo(
-  ({
-    data,
-    loading,
-    error,
-    onRetry,
-  }: {
-    data: MeritApyDataItem[];
-    loading: boolean;
-    error: boolean;
-    onRetry: () => void;
-  }) => (
-    <MeritApyGraphContainer
-      data={data}
-      loading={loading}
-      error={error}
-      title="GHO APR"
-      lineColor="#2EBAC6"
-      showAverage={true}
-      onRetry={onRetry}
-    />
-  ),
-  (prevProps, nextProps) => {
-    // Custom comparison function to prevent unnecessary re-renders
-    return (
-      prevProps.loading === nextProps.loading &&
-      prevProps.error === nextProps.error &&
-      prevProps.data === nextProps.data && // Reference equality check
-      prevProps.onRetry === nextProps.onRetry
-    );
-  }
-);
-
-MemoizedMeritApyChart.displayName = 'MemoizedMeritApyChart';
-
 export interface SGHODepositPanelProps {
   onStakeAction?: () => void;
   onStakeRewardClaimAction?: () => void;
@@ -531,14 +494,16 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
             </Box>
           </Stack>
 
-          <Box>
-            <MemoizedMeritApyChart
-              data={meritApyHistory}
-              loading={loadingMeritApy}
-              error={errorMeritApyHistory}
-              onRetry={refetchMeritApyHistory}
-            />
-          </Box>
+          <MeritApyGraphContainer
+            data={meritApyHistory}
+            loading={loadingMeritApy}
+            error={errorMeritApyHistory}
+            onRetry={refetchMeritApyHistory}
+            title="GHO APR"
+            lineColor="#2EBAC6"
+            showAverage={true}
+            height={155}
+          />
         </Grid>
       </Grid>
     </>