diff --git a/src/components/onboarding/screens/create.tsx b/src/components/onboarding/screens/create.tsx index e43b4101542..78f4ffbf96f 100644 --- a/src/components/onboarding/screens/create.tsx +++ b/src/components/onboarding/screens/create.tsx @@ -34,12 +34,7 @@ const ExplainerCard = ({ title, imageUrl }: ExplainerCardProps) => ( ); -interface MockData { - title: string; - imageUrl: string; -} - -const createTimeoutLoop = (setState: (item: MockData) => void, arr: MockData[], onEnd: () => void) => +const createTimeoutLoop = (setState: (item: ExplainerData) => void, arr: ExplainerData[], onEnd: () => void) => arr.forEach((item, index) => setTimeout(() => { setState(item); @@ -49,6 +44,32 @@ const createTimeoutLoop = (setState: (item: MockData) => void, arr: MockData[], }, (index + 1) * 2400) ); +const explainerData: ExplainerCardProps[] = [ + { + title: 'Private data storage', + imageUrl: '/assets/images/icon-delay-private.svg', + }, + { + title: 'Always-on encryption', + imageUrl: '/assets/images/icon-delay-padlock.svg', + }, + { + title: 'Access to 100s of apps', + imageUrl: '/assets/images/icon-delay-apps.svg', + }, + { + title: 'This will not display', + imageUrl: '', + }, +]; + +const preloadImages = (images: { imageUrl: string }[]) => { + images.forEach(({ imageUrl }) => { + const img = new Image(); + img.src = imageUrl; + }); +}; + interface CreateProps { next: () => void; } @@ -60,31 +81,16 @@ export const Create: React.FC = props => { }); const dispatch = useDispatch(); - const mockData: MockData[] = [ - { - title: 'Private data storage', - imageUrl: '/assets/images/icon-delay-private.svg', - }, - { - title: 'Always-on encryption', - imageUrl: '/assets/images/icon-delay-padlock.svg', - }, - { - title: 'Access to 100s of apps', - imageUrl: '/assets/images/icon-delay-apps.svg', - }, - { - title: 'This will not display', - imageUrl: '', - }, - ]; + useEffect(() => { + preloadImages(explainerData); + }, []); useEffect(() => { // This timeout is important because if the app is navigated to as a sign in, the // create page will be rendered momentarily, and we need to cancel these // functions if we're on a different screen const timeout = setTimeout(() => { - createTimeoutLoop(setState, mockData, () => props.next()); + createTimeoutLoop(setState, explainerData, () => props.next()); dispatch(doCreateSecretKey()); }, 200); return () => clearTimeout(timeout);