Prevent layout shifts when thumbnails load in the chapter selector #4713
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
absidue
requested review from
PikachuEXE,
efb4f5ff-1298-471a-8973-3d47447115dc,
ChunkyProgrammer,
kommunarr and
MarmadileManteater
github-actions
bot
added
the
PR: waiting for review
PikachuEXE
approved these changes
Feb 25, 2024
efb4f5ff-1298-471a-8973-3d47447115dc
approved these changes
Feb 26, 2024
ChunkyProgrammer
approved these changes
Feb 26, 2024
github-actions
bot
removed
the
PR: waiting for review
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Feb 27, 2024
…-user-playlist-2 * development: Translated using Weblate (Basque) Prevent layout shifts when thumbnails load in the chapter selector (FreeTubeApp#4713) Bump electron-builder from 24.9.1 to 24.12.0 (FreeTubeApp#4718) Bump sass-loader from 14.1.0 to 14.1.1 (FreeTubeApp#4719) Bump sass from 1.71.0 to 1.71.1 (FreeTubeApp#4716) Bump the eslint group with 2 updates (FreeTubeApp#4715) Support opening video timestamps in a new window (FreeTubeApp#4687) Translated using Weblate (Basque) Bump webpack-dev-server from 4.15.1 to 5.0.2 (FreeTubeApp#4695) Translated using Weblate (Japanese) Translated using Weblate (Czech) Translated using Weblate (Lithuanian) Translated using Weblate (Japanese) Translated using Weblate (Vietnamese) Bump youtubei.js to 9.1.0 for watch page fix (FreeTubeApp#4707) Translated using Weblate (Vietnamese) Translated using Weblate (Vietnamese) Translated using Weblate (Portuguese (Brazil))
Merged
4 tasks
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Feb 27, 2024
* feature/playlist-layout-shift: * Make video thumbnails have certain height before image loading starts to avoid layout shifts Translated using Weblate (Basque) Prevent layout shifts when thumbnails load in the chapter selector (FreeTubeApp#4713) Bump electron-builder from 24.9.1 to 24.12.0 (FreeTubeApp#4718) Bump sass-loader from 14.1.0 to 14.1.1 (FreeTubeApp#4719) Bump sass from 1.71.0 to 1.71.1 (FreeTubeApp#4716) Bump the eslint group with 2 updates (FreeTubeApp#4715) Support opening video timestamps in a new window (FreeTubeApp#4687) Translated using Weblate (Basque) Bump webpack-dev-server from 4.15.1 to 5.0.2 (FreeTubeApp#4695) Translated using Weblate (Japanese) Translated using Weblate (Czech) Translated using Weblate (Lithuanian) Translated using Weblate (Japanese) Translated using Weblate (Vietnamese) Bump youtubei.js to 9.1.0 for watch page fix (FreeTubeApp#4707) Translated using Weblate (Vietnamese) Translated using Weblate (Vietnamese)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Prevent layout shifts when thumbnails load in the chapter selector
Pull Request Type
Description
When you expand the chapters selector for the first time on a video, the thumbnails are fetched from the network, unfortunately as that happens asynchronously, it means that as they load in they cause layout shifts. Those unexpected layout shifts are an unpleasant experience for the user, as they might have already started reading some text, that then changed position on the page, without them doing anything (e.g. no scrolling). We already set a width for the thumbnails in the CSS to avoid them taking up too much of the page, but we don't hardcode a height, to avoid potentially squashing together the image.
As YouTube's API helpfully tells us the height and width, we can calculate the desired aspect ratio and set that with CSS in the Vue template, before the image is downloaded. Using the aspect ratio, instead of just setting the height, lets us change the width in the CSS file in the future, without having to make changes to the Vue file.
Screenshots
Don't know how to do a screen recording and the issue isn't that hard to notice.
Testing
Needs to be tested on the local API, as Invidious doesn't support chapters yet, so we have to extract them from the description ourselves and don't have thumbnails.
With this pull request when you open the chapters selector for the first time, the items should just stay where they are when the images load in, instead of moving up and down.
You probably want to pick different videos for the before and after testing, as the issue is a lot less noticeable when the images come from the cache instead of over the network.
Some videos on the
@YouTubechannel that have chapters:Desktop