fix: prevent the buttons from flashing when the app starts

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>
   );
 };