From 43948b5e14864a77e963f4e6eb9ce708f9b082d8 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 16 Sep 2024 10:56:07 -0400
Subject: [PATCH] style: height transition for count cards

---
 src/js/components/Overview/Counts.tsx | 12 ++++++++++--
 src/js/constants/overviewConstants.ts |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
index 8fd0c037..8cdb65e2 100644
--- a/src/js/components/Overview/Counts.tsx
+++ b/src/js/components/Overview/Counts.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { Typography, Card, Space, Statistic } from 'antd';
 import { TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
@@ -7,6 +7,14 @@ import ExpSvg from '../Util/ExpSvg';
 import { COUNTS_FILL, BOX_SHADOW } from '@/constants/overviewConstants';
 import { useAppSelector, useTranslationDefault } from '@/hooks';
 
+const styles: Record<string, CSSProperties> = {
+  countCard: {
+    ...BOX_SHADOW,
+    minWidth: 150,
+    transition: 'height 0.5s ease-in-out',
+  },
+};
+
 const Counts = () => {
   const td = useTranslationDefault();
 
@@ -35,7 +43,7 @@ const Counts = () => {
       <Typography.Title level={3}>{td('Counts')}</Typography.Title>
       <Space direction="horizontal">
         {data.map(({ title, icon, count }, i) => (
-          <Card key={i} style={BOX_SHADOW}>
+          <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
             <Statistic
               title={td(title)}
               value={count}
diff --git a/src/js/constants/overviewConstants.ts b/src/js/constants/overviewConstants.ts
index b3d49772..d64869b2 100644
--- a/src/js/constants/overviewConstants.ts
+++ b/src/js/constants/overviewConstants.ts
@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import type { HexColor } from 'bento-charts';
 
 export const COUNTS_FILL = '#75787a';
@@ -8,7 +9,7 @@ export const CHART_HEIGHT = 350;
 export const PIE_CHART_HEIGHT = 300; // rendered slightly smaller since labels can clip
 export const DEFAULT_CHART_WIDTH = 1;
 
-export const BOX_SHADOW = { boxShadow: '0 2px 10px rgba(0,0,0,0.05)' };
+export const BOX_SHADOW: CSSProperties = { boxShadow: '0 2px 10px rgba(0,0,0,0.05)' };
 
 export const CHART_WIDTH = 450;
 export const GRID_GAP = 20;