fix: give activity screen a min height to stop it jumping when empty, c…

…loses #4249

src/app/features/activity-list/activity-list.tsx

@@ -16,6 +16,7 @@ import { convertBitcoinTxsToListType, convertStacksTxsToListType } from './activ
 import { NoAccountActivity } from './components/no-account-activity';
 import { PendingTransactionList } from './components/pending-transaction-list/pending-transaction-list';
 import { SubmittedTransactionList } from './components/submitted-transaction-list/submitted-transaction-list';
+import { TabWrapper } from './components/tab-wrapper';
 import { TransactionList } from './components/transaction-list/transaction-list';
 
 // TODO: temporary really ugly fix while we address conditional data problem of
@@ -94,12 +95,22 @@ export function ActivityList() {
 
   const hasTxs = hasSubmittedTransactions || hasPendingTransactions || hasTransactions;
 
-  if (isInitialLoading) return <LoadingSpinner />;
+  if (isInitialLoading)
+    return (
+      <TabWrapper padContent>
+        <LoadingSpinner />
+      </TabWrapper>
+    );
 
-  if (!hasTxs) return <NoAccountActivity />;
+  if (!hasTxs)
+    return (
+      <TabWrapper padContent>
+        <NoAccountActivity />
+      </TabWrapper>
+    );
 
   return (
-    <>
+    <TabWrapper>
       {hasSubmittedTransactions && <SubmittedTransactionList txs={submittedTransactions} />}
       {hasPendingTransactions && (
         <PendingTransactionList
@@ -114,6 +125,6 @@ export function ActivityList() {
           currentBitcoinAddress={nsBitcoinAddress}
         />
       )}
-    </>
+    </TabWrapper>
   );
 }

src/app/features/activity-list/components/no-account-activity.tsx

@@ -1,11 +1,11 @@
 import NoActivity from '@assets/images/no-activity.png';
-import { Stack } from '@stacks/ui';
+import { Stack } from 'leather-styles/jsx';
 
 import { Caption } from '@app/components/typography';
 
 export function NoAccountActivity() {
   return (
-    <Stack py="extra-loose" spacing="extra-loose" justifyContent="center" alignItems="center">
+    <Stack gap="space.06" justifyContent="center" alignItems="center">
       <img src={NoActivity} width="120px" />
       <Caption maxWidth="23ch" textAlign="center">
         No activity yet

src/app/features/activity-list/components/tab-wrapper.tsx

@@ -0,0 +1,15 @@
+import { Box } from 'leather-styles/jsx';
+
+interface TabWrapperProps {
+  children: React.ReactNode;
+  padContent?: boolean;
+}
+
+export function TabWrapper({ children, padContent = false }: TabWrapperProps) {
+  return (
+    // Height set based on the height of the empty assets screen
+    <Box minHeight="477px" py={padContent ? 'space.11' : undefined}>
+      {children}
+    </Box>
+  );
+}

src/app/features/asset-list/asset-list.tsx

@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Stack } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
+import { Stack } from 'leather-styles/jsx';
 
 import { LEDGER_BITCOIN_ENABLED } from '@shared/environment';
 
@@ -27,22 +27,22 @@ export function AssetsList() {
   const navigate = useNavigate();
 
   return (
-    <Stack pb="extra-loose" spacing="loose" data-testid={HomePageSelectors.BalancesList}>
+    <Stack pb="space.06" gap="space.05" data-testid={HomePageSelectors.BalancesList}>
       {/* Temporary duplication during Ledger Bitcoin feature dev */}
       {whenWallet({
         software: (
           <CryptoCurrencyAssetItem
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<Box as={BtcIcon} />}
+            icon={<BtcIcon />}
             address={btcAddress}
           />
         ),
         ledger: LEDGER_BITCOIN_ENABLED ? (
           <CryptoCurrencyAssetItem
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<Box as={BtcIcon} />}
+            icon={<BtcIcon />}
             address={btcAddress}
             // add conditionally if not bitcoin keys
             isPressable={!btcAddress}