From 7349e27dc192e89aa4247cbfeb16cc8f857b0300 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 24 May 2024 15:50:33 +1000
Subject: [PATCH] fix: prevent the buttons from flashing when the app starts

---
 ts/components/registration/stages/Start.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx
index f7007539f..0e4f9057d 100644
--- a/ts/components/registration/stages/Start.tsx
+++ b/ts/components/registration/stages/Start.tsx
@@ -1,5 +1,8 @@
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
+import styled from 'styled-components';
+import { sleepFor } from '../../../session/utils/Promise';
 import {
   AccountCreation,
   AccountRestoration,
@@ -15,16 +18,30 @@ import { SpacerLG } from '../../basic/Text';
 import { resetRegistration } from '../RegistrationStages';
 import { TermsAndConditions } from '../TermsAndConditions';
 
+// NOTE we want to prevent the buttons from flashing when the app starts
+const StyledStart = styled.div<{ ready: boolean }>`
+  ${props =>
+    !props.ready &&
+    `.session-button {
+    transition: none;
+  }`}
+`;
+
 export const Start = () => {
+  const [ready, setReady] = useState(false);
+
   const dispatch = useDispatch();
 
   useMount(() => {
     dispatch(resetOnboardingState());
     void resetRegistration();
+
+    // eslint-disable-next-line more/no-then
+    void sleepFor(500).then(() => setReady(true));
   });
 
   return (
-    <>
+    <StyledStart ready={ready}>
       <SessionButton
         buttonColor={SessionButtonColor.White}
         onClick={() => {
@@ -48,6 +65,6 @@ export const Start = () => {
       />
       <SpacerLG />
       <TermsAndConditions />
-    </>
+    </StyledStart>
   );
 };