Skip to content

Conversation

Forfold
Copy link
Contributor

@Forfold Forfold commented Dec 6, 2023

Description:
This PR updates the current app-wide suspense logic in place of a splash screen embedded in the index.html. This still solves the issue of the app screen flickering in when not logged in (and vice verse with the login screen), but instead shows a gif of the new brand logo with 3 loading dots.

Other Changes:

  • Branding has been updated for the GoAlert logo app-wide
  • Sidebar width slightly decreased to account for new logo sizing

How to test:

  1. Delete the folder web/src/build/static
  2. Run yarn esbuild to regenerate it (pre-run yarn if needed to install the latest deps)
  3. Run make start
  4. To see the logo for longer, open the browser console and navigate to the Network tab
  5. Click "No throttling" in the header to open the drop down, then select "Slow 3G"
  6. Refresh the page
Screenshots:

Screenshot 2023-12-06 at 7 31 53 AM

Screenshot 2023-12-06 at 7 31 41 AM

Screenshot 2023-12-06 at 7 32 09 AM

Screenshot 2023-12-06 at 7 32 35 AM

Screenshot 2023-12-06 at 7 32 48 AM

splash_logo

@github-actions github-actions bot added the size/m label Dec 6, 2023
@mastercactapus
Copy link
Member

For the logo images -- is it possible to switch entirely to SVG? If so we could just have 1 or 2 files (3 incl. gif -- though it may be possible to animate the SVG too) with vector images we wouldn't need to maintain separate scaling versions

@Forfold
Copy link
Contributor Author

Forfold commented Dec 11, 2023

@mastercactapus I was under the impression that webp is best for the web after my research, but we do have svgs available that I can use instead of the webp source-set, if you'd prefer

@mastercactapus
Copy link
Member

webp would be better than png, but since we have SVG as an option, it might be worth a little time to see if it's feasible to have a single source of truth; less maintenance, less data in git.

That said I'm open to learning about what you found, my impression is SVG/vector is ideal if you have it since it cleanly scales up and down, and WebP is best if you're working with raster images.

I have a little experience animating svgs too if you want to explore that.

tony-tvu
tony-tvu previously approved these changes Dec 11, 2023
Copy link
Collaborator

@tony-tvu tony-tvu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

KatieMSB
KatieMSB previously approved these changes Dec 11, 2023
@Forfold Forfold dismissed stale reviews from KatieMSB and tony-tvu via cae248d December 12, 2023 16:19
@github-actions github-actions bot added size/l and removed size/m labels Dec 12, 2023
tony-tvu
tony-tvu previously approved these changes Dec 12, 2023
KatieMSB
KatieMSB previously approved these changes Dec 12, 2023
@Forfold Forfold dismissed stale reviews from KatieMSB and tony-tvu via d707cb0 December 12, 2023 17:02
@Forfold Forfold merged commit bd4b22a into master Dec 12, 2023
@Forfold Forfold deleted the splash branch December 12, 2023 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants