Loading Screen to Welcome Screen

[NIDHI2023]

Summary

Building on this Wrapped Frontend PR and this animation PR, creates a loading animation screen that transitions into the welcome screen.

Screen.Recording.2024-10-27.at.1.27.18.PM.mov

• Made animation faster
• Fixed some centering issues on different devices

Test Plan

• Loading animation should look centered on different device widths
• No lags or delays, and dots and arrows should only show up after the welcome component is rendered

Notes

• I made the loading animation have a 0.8s delay because shortening this caused some odd CSS flickering, and this was the lowest time I could go without the flickering

Breaking Changes

None

• I have updated the documentation accordingly.
• My PR adds a @ts-ignore

[dti-github-bot]

[diff-counting] Significant lines: 322.

[rgu0114]

Great work integrating the animation into the transition into the Wrapped modal. Since we have this, I think we can close the original animation PR. I did notice from testing on my side though that there was a bit longer of a delay (a few seconds) where it seemed a little stuck on the DTI logo. Are you seeing this as well? Could just be slow network speed on my side.

[rgu0114]

instead of conditionally rendering an empty component, this is typically done with && in typescript (see line 418 for an example)

[EricWeng23]

Overall, the animation looks good. I'm just curious that since this calls an inline-function inside of onAnimationEnd, wouldn't this create a timer every re-render. Would it be better to make declare the function outside? This might be a bit better performance-wise if the component frequently re-renders or updates.

[rgu0114]

good to merge once changes are addressed