Refactor app upgrade footer to height animation

3 files changed, 36 insertions, 11 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
index c25bbe2a3a..5d56347a50 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/AppUpgradeView.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-import { Animate } from '../../../lib/components/animate';
 import { useHistory } from '../../../lib/history';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout } from '../../Layout';
@@ -22,9 +21,7 @@ export const AppUpgradeView = () => {
       <Layout>
         <UpgradeDetails />
         <StyledFooter>
-          <Animate animations={[{ type: 'wipe', direction: 'vertical' }]} present>
-            <Footer />
-          </Animate>
+          <Footer />
         </StyledFooter>
       </Layout>
     </BackAction>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/Footer.tsx
index fc27698407..632081bd42 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/Footer.tsx
@@ -1,3 +1,6 @@
+import styled from 'styled-components';
+
+import { useMeasure } from '../../../../../hooks';
 import {
   DownloadFooter,
   ErrorFooter,
@@ -8,23 +11,48 @@ import {
 } from './components';
 import { useStep } from './hooks';
 
+const TransitionHeight = styled.div<{ $height: string }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+  height: ${({ $height }) => $height};
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+`;
+
 export function Footer() {
   const step = useStep();
+  const [ref, { height }] = useMeasure<HTMLDivElement>();
+  let footer: React.ReactElement | null = null;
 
   switch (step) {
     case 'download':
-      return <DownloadFooter />;
+      footer = <DownloadFooter />;
+      break;
     case 'error':
-      return <ErrorFooter />;
+      footer = <ErrorFooter />;
+      break;
     case 'initial':
-      return <InitialFooter />;
+      footer = <InitialFooter />;
+      break;
     case 'launch':
-      return <LaunchFooter />;
+      footer = <LaunchFooter />;
+      break;
     case 'pause':
-      return <PauseFooter />;
+      footer = <PauseFooter />;
+      break;
     case 'verify':
-      return <VerifyFooter />;
+      footer = <VerifyFooter />;
+      break;
     default:
       return step satisfies never;
   }
+
+  return (
+    <TransitionHeight $height={`${height}px`}>
+      <div ref={ref}>{footer}</div>
+    </TransitionHeight>
+  );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts
index 5f5ed589bc..fafb1066c1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useLayoutEffect, RefCallback } from 'react';
+import { RefCallback, useCallback, useLayoutEffect, useState } from 'react';
 
 export interface MeasureSize {
   width: number;