improve ux

ux update

packages/ui/app/_components/AnimateHeight.tsx

@@ -0,0 +1,30 @@
+import { useState, useRef, useLayoutEffect } from 'react';
+
+const AnimateHeight = ({ children }: { children: React.ReactNode }) => {
+  const [height, setHeight] = useState<number | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        if (contentRef.current) {
+          setHeight(contentRef.current.scrollHeight);
+        }
+      });
+
+      resizeObserver.observe(contentRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+
+  return (
+    <div
+      className="transition-[height] duration-300 ease-in-out overflow-hidden"
+      style={{ height: height ? `${height}px` : 'auto' }}
+    >
+      <div ref={contentRef}>{children}</div>
+    </div>
+  );
+};
+
+export default AnimateHeight;

packages/ui/app/_components/ProgressBar.tsx

@@ -0,0 +1,33 @@
+import React, { memo, useMemo } from 'react';
+
+import { Progress } from '@ui/components/ui/progress';
+
+export type ProgressBarProps = {
+  max: number;
+  value: number;
+};
+
+function ProgressBar({ max, value }: ProgressBarProps) {
+  const percentage = useMemo<number>(() => (value / max) * 100, [max, value]);
+
+  const percentageFormatted = useMemo<string>(
+    () => `${percentage.toFixed(2)}%`,
+    [percentage]
+  );
+
+  return (
+    <div className="w-full space-y-1">
+      <Progress
+        value={percentage}
+        className="h-2"
+      />
+      <div className="text-xs text-gray-400">
+        {percentageFormatted} utilized
+      </div>
+    </div>
+  );
+}
+
+const MemoizedProgressBar = memo(ProgressBar);
+
+export default MemoizedProgressBar;

packages/ui/app/_components/UtilizationStats.tsx

@@ -0,0 +1,51 @@
+import React, { memo, useMemo } from 'react';
+
+import millify from 'millify';
+
+import MemoizedDonutChart from './dialogs/manage/DonutChart';
+
+interface UtilizationStatsProps {
+  label: string;
+  value: number;
+  max: number;
+  symbol?: string;
+  valueInFiat: number;
+  maxInFiat: number;
+}
+
+function UtilizationStats({
+  label,
+  value,
+  max,
+  symbol = '',
+  valueInFiat,
+  maxInFiat
+}: UtilizationStatsProps) {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex items-center">
+        <div className="w-20 mr-4">
+          <MemoizedDonutChart
+            max={max}
+            value={value}
+          />
+        </div>
+        <div>
+          <div className="text-gray-400">{label}:</div>
+          <div className="text-white">
+            <strong>
+              {millify(value)} of {millify(max)} {symbol}
+            </strong>
+          </div>
+          <div className="text-sm text-gray-300">
+            ${millify(valueInFiat)} of ${millify(maxInFiat)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoizedUtilizationStats = memo(UtilizationStats);
+
+export default MemoizedUtilizationStats;

packages/ui/app/_components/dialogs/loop/SupplyActions.tsx

@@ -7,7 +7,6 @@ import { useMaxSupplyAmount } from '@ui/hooks/useMaxSupplyAmount';
 import type { MarketData } from '@ui/types/TokensDataMap';
 
 import Amount from '../manage/Amount';
-import SliderComponent from '../manage/Slider';
 
 export type LoopProps = {
   borrowableAssets: Address[];
@@ -129,6 +128,8 @@ function SupplyActions({
             )}
             selectedMarketData={selectedCollateralAsset}
             symbol={selectedCollateralAsset.underlyingSymbol}
+            currentUtilizationPercentage={utilization}
+            handleUtilization={handleSupplyUtilization}
           />
 
           <div className="flex text-xs text-white/50">
@@ -137,11 +138,6 @@ function SupplyActions({
               selectedCollateralAssetUSDPrice * parseFloat(amount ?? '0')
             ).toFixed(2)}
           </div>
-
-          <SliderComponent
-            currentUtilizationPercentage={utilization}
-            handleUtilization={handleSupplyUtilization}
-          />
         </>
       )}