style: height transition for count cards

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}

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;