Cc-loading-skeleton no show when div set display:flex

General
1

Description:

So for the Query block, when we enable frontend render, there will be a default .cc-loading-skeleton animation added to the query item so it looks like it’s loading upon page arrival.

We are having some weird issue where when we set a div inside of the query template (that’s what we normally do, then start adding child blocks like dynamic titles, buttons, etc) to display: flex, all of the .cc-loading-skeleton will not load, causing the animation not displaying upon the page arrival, so people only see empty query loop for a couple seconds until the query is loaded (if you have more than 100 posts to load)

Environment info

  • WordPress version: 6.2
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.2.9.5.8.3
  • Cwicly Theme version: 1.0.3
2

Hi @lukelee,

Sorry to hear you’re experiencing trouble with this.

I don’t think this is a bug as setting your div to flex makes it hard for Cwicly to estimate the size of your items (to make the skeleton).

To avoid this, I would suggest to either:

  • set a specific height for your div
  • set a height and width for the skeleton of your div from the Advanced > Skeleton tabs

skeleton-tab
skeleton-tab560×560 19.3 KB

Please let me know if this helps!

1 Like
3

Ohh, learned something new today! I was thinking about this feature last night when I tried to figure it out too because I remember seeing something like this in a live stream video from Louis but couldn’t find it.

Thank you @Araminta !

1 Like
4

@lukelee, I also raised this feature request with a view to making it easier to manage the skeleton sizes related to other styles/classes: