d2d22cf · bridge · git.iko.soy

git.iko.soy/bridge

ui: remove jank in Reveal animation

Pre-render the elements with opacity: 0; this avoid the browser having to re-render (and jank the page)

commitd2d22cf46bf8751148b5ea0866cd6cf9fa9a7162 authortomholford <tomholford@users.noreply.github.com> dateWed 6 Oct 2021, 09:35 (5 years ago) parentf01e868

6 files changed+27−11

compare with master

unifiedsplit

src/style/bridge.scss+7 src/views/Activate/ActivateParagraph.tsx−2 src/views/Activate/DangerBox.tsx+4−1 src/views/Activate/MasterKeyConfirm.tsx+1−2 src/views/Activate/MasterKeyCopy.tsx+4−2 src/views/Activate/MasterKeyDownload.tsx+11−4

src/style/bridge.scss+7

@@ -28,3 +28,10 @@ div.copy-button-wide {

2828 font-size: 0.75rem;

2929 }

3030}

31+

32+// Animations for Activate Flow

33+div.danger-box, div.mk-copy {

34+ &.hidden {

35+ opacity: 0;

36+ }

37+}

src/views/Activate/ActivateParagraph.tsx−2

@@ -20,8 +20,6 @@ const ActivateParagraph = ({ copy }: ActivateParagraphProps) => {

2020 fontSize={2}

2121 lineHeight={'20px'}

2222 color={'rgba(0,0,0,0.6)'}

23− mx={3}

24− my={3}

2523 textAlign="center"

2624 width={'80%'}>

2725 {copy}

src/views/Activate/DangerBox.tsx+4−1

@@ -1,17 +1,20 @@

11import { Box, Text } from '@tlon/indigo-react';

22import React from 'react';

3+import cn from 'classnames';

34import withFadeable from './withFadeable';

56interface DangerBoxProps {

67 children: React.ReactNode | string;

8+ className?: string;

79}

810

9−const DangerBox = ({ children }: DangerBoxProps) => {

11+const DangerBox = ({ children, className }: DangerBoxProps) => {

1012 return (

1113 <Box

1214 background={'rgb(246,200,196)'}

1315 border={'solid 1px rgb(236,81,66)'}

1416 padding={'15px 45px'}

17+ className={cn(['danger-box', className])}

1518 borderRadius={'5px'}>

1619 <Text color={'black'} fontSize={'16px'} fontFamily="Inter">

1720 {children}

src/views/Activate/MasterKeyConfirm.tsx+1−2

@@ -90,8 +90,7 @@ const MasterKeyConfirm = () => {

9090 return (

9191 <View centered={true}>

9292 <NavHeader>

93− <Box

94− marginBottom={'10px'}>

93+ <Box marginBottom={'10px'}>

9594 <MiniBackButton

9695 hpadding={true}

9796 vpadding={true}

src/views/Activate/MasterKeyCopy.tsx+4−2

@@ -1,19 +1,21 @@

11import { Box, Icon, Text } from '@tlon/indigo-react';

2+import cn from 'classnames';

23import useCopiable from '../../lib/useCopiable';

34import withFadeable from './withFadeable';

56interface MasterKeyCopyProps {

67 text: string;

8+ className?: string;

79}

810

9−const MasterKeyCopy = ({ text }: MasterKeyCopyProps) => {

11+const MasterKeyCopy = ({ text, className }: MasterKeyCopyProps) => {

1012 const [doCopy, didCopy] = useCopiable(text);

1113 const { color, label, icon } = didCopy

1214 ? { color: 'rgb(70,156,106)', label: 'Copied', icon: 'Checkmark' }

1315 : { color: 'rgb(89,167,248)', label: 'Copy', icon: 'Copy' };

1416

1517 return (

16− <Box onClick={() => doCopy()}>

18+ <Box className={cn(['mk-copy', className])} onClick={() => doCopy()}>

1719 <Box

1820 display={'flex'}

1921 flexDirection={'row'}

src/views/Activate/MasterKeyDownload.tsx+11−4

@@ -25,6 +25,7 @@ const MasterKeyDownload = () => {

2525 const {

2626 derivedPoint,

2727 derivedWallet,

28+ isIn,

2829 setGenerated,

2930 setIsIn,

3031 } = useActivateFlow();

@@ -115,13 +116,19 @@ const MasterKeyDownload = () => {

115116 flexWrap={'nowrap'}

116117 height={'100%'}

117118 justifyContent={'space-evenly'}>

118− {triggerAnimation && (

119− <DangerBox>Do not share this with anyone else!</DangerBox>

120− )}

119+ <DangerBox

120+ overrideFadeIn={triggerAnimation && isIn}

121+ className={!isIn ? 'hidden' : ''}>

122+ Do not share this with anyone else!

123+ </DangerBox>

121124 {ticket && (

122125 <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />

123126 )}

124− {triggerAnimation && <MasterKeyCopy text={ticket} />}

127+ <MasterKeyCopy

128+ text={ticket}

129+ overrideFadeIn={triggerAnimation && isIn}

130+ className={!isIn ? 'hidden' : ''}

131+ />

125132 </Box>

126133 </ActivateView>

127134 <ActivateSteps currentStep={1} totalSteps={4} />