Avoid Banner-4 shuffling on page load with placeholder

[leecalcote]

Current Behavior

On the homepage, banner, for will have its text, shuffled around on page load, while the short video is loaded on the right hand side.

Desired Behavior

Ideally, a placeholder is used or some other mechanism to ensure that the main text of the banner isn't jostled around while the video loads.

Screenshots / Mockups

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[MrBehl06]

@leecalcote Please assign this issue to me?

[leecalcote]

@MrBehl06 thanks for asking. Given your prior track record 😬, will you first prototype and propose a solution?

[oneknucklehead]

Hey @leecalcote I believe we should implement skeleton loading for this. Not just for this, we can implement this wherever we are using images/gifs that takes time to fetch

[leecalcote]

@oneknucklehead yes, an extremely lightweight placeholder, like an empty div that is configured under the same size constraints that the video is.

[MrBehl06]

@leecalcote I think We just need to add the margin-top and should decrease the max-width to 85% will solve this problem.
or else its position is relative we just add right margin.

[oneknucklehead]

hey @leecalcote
Below Gif currently demonstrates my solution.

[Avi-88]

hey @leecalcote Below Gif currently demonstrates my solution.

hey @leecalcote Below Gif currently demonstrates my solution.

@leecalcote I think We just need to add the margin-top and should decrease the max-width to 85% will solve this problem. or else its position is relative we just add right margin.

Hi @MrBehl06 , regarding your approach , rather than using width or margin to solve this issue which most probably won't be consistent across varying screen sizes its better to use a skeleton as a placeholder for the video/image. @oneknucklehead's mockup looks promising , It just needs a little bit of tweaking to have the same dimensions as the media to be loaded. I would like to hear you guy's thoughts regarding the skeleton being an image similar to the media to be rendered or a classis pulsing gray div that is commonly used like below ,thanks

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Avi-88]

@oneknucklehead are you still up for proposing a fix for this ?

[shirsho-roy]

@leecalcote can you assign this to me? I would like to work on this issue

[Savio629]

@shirsho-roy Any updates?

[shirsho-roy]

@Savio629 Working on it

[Savio629]

Any updates @shirsho-roy ?

[Savio629]

@shirsho-roy Are you still working on this issue?

[leecalcote]

Assignment seemingly abandoned. Opening for reassignment.

[saaagarsingh]

Hey @leecalcote @Savio629 I would love to work on this.
Just need clarity that we need to have the space for video covered all the time so that text stays as it's position all the time even when the video is loading.

[github-actions]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ankushbhardwaj408]

Recording.2023-11-16.201242.mp4

@leecalcote take a look at this.