search

Rebuild-Black-Business / RBB-Website

Website to help connect black-owned businesses with consumers and resources
https://www.rebuildblackbusiness.com/
MIT License
119 stars 72 forks source link

[BUG] Get rid of the flash that happens when loading the website #281

Closed ashtine closed 4 years ago

ashtine commented 4 years ago

Describe the bug The flash that happens when loading the website

To Reproduce Steps to reproduce the behavior:

  1. Go to rebuildbackbusiness.com
  2. Observe

Expected behavior No flash and looks clean

Actual Behavior A flash and kinda clunky

Screenshots Screen Capture on 2020-06-26 at 16-20-49

ifyoumakeit commented 4 years ago

I can take a look at this, it looks like we can get a lot of mileage out of preloading the fonts and the hero image using meta tags in the <head />. Resizing the hero image using srcSet to fit will also speed up the site and remove the flash of it loading.

Can use some dynamic URLS from cloudinary for srcSet https://cloudinary.com/documentation/responsive_images

ifyoumakeit commented 4 years ago

Actually looking into it more, it looks like the hero image doesn't load without JavaScript, most likely to the use of use-cloudinary which gets the image URL client-side vs gatsby-source-cloudinary which would get in at gatsby-build time.

magnificode commented 4 years ago

@ifyoumakeit it might be useful to work with @domitriusclark on this one! Preloading fonts and other assets as best we can is a great idea as well. Feel free to move on what you can, and work with Dom on the image stuff in particular! I'll assign this task to you and him for now!

ifyoumakeit commented 4 years ago

@ifyoumakeit it might be useful to work with @domitriusclark on this one! Preloading fonts and other assets as best we can is a great idea as well. Feel free to move on what you can, and work with Dom on the image stuff in particular! I'll assign this task to you and him for now!

Sounds good!

magnificode commented 4 years ago

@ifyoumakeit - @domitriusclark merged a few updates to the Cloudinary Image component today #299 . Not sure if that helps this issue, but figured I'd keep you updated :).

Anything we can do to help with this issue let us know!

JapneetSingh5 commented 4 years ago

Hi, I would love to contribute to your site. Can i comtribute to this issue or anywhere else you may need?

ifyoumakeit commented 4 years ago

@ifyoumakeit - @domitriusclark merged a few updates to the Cloudinary Image component today #299 . Not sure if that helps this issue, but figured I'd keep you updated :).

Anything we can do to help with this issue let us know!

Thanks for the update, I’ll see if this helps here.

magnificode commented 4 years ago

I think we've handled what we can with this issue at this point. We may want to consider creating a new task to add a loader to the site that will wait for all assets to load before animating the site in. Closing for now, we can create a new issue down the line for a loader if we wish!