Automattic / newspack-blocks

Gutenberg blocks for the Newspack project.
205 stars 43 forks source link

Post Carousel Block - Flash of featured image seen before posts load #1882

Open lizswafford opened 2 weeks ago

lizswafford commented 2 weeks ago

Describe the bug When scrolling down a page that has a Post Carousel Block, the user will see a large featured image appear across the space of the block before seeing the actual carousel with posts. (It is similar to when you see a flash of unstyled text before a custom font loads on a site.) Tested this on my simple site with different images and posts and found the same effect.

(8657321-zd)

To Reproduce Steps to reproduce the behavior:

  1. Go to a simple site and add a Post Carousel block. If the block is not available, activate it in the editor preferences.
  2. Set the block to show 4 posts at a time and load 20 or more.
  3. Publish the changes and visit the new page.
  4. Scroll down to view the block, notice there is a flash of an image before the posts load. Reload to view the image flash again, or try a different browser. (This was very noticeable in Safari.)

Screenshots

What the carousel should look like (this screenshot includes custom CSS for the text): What the blog slider should look like

What the carousel looks like when it first loads (the featured image from the first post appears across the block.): What comes up when first scrolling down the page

Expected behavior All posts in the block should load with no pre-loading visible to the user.