LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity
lbry-desktop/ui/scss/component
History
infinite-persistence 032e17cecd
Improve CLS on Posts 
## Issue
6068 Fix "Cumulative Layout Shift" for Core Web Vitals

In Posts, the Comments section appears first while we fetch the MD file. When the MD is fetched, Comments get pushed to the bottom (or shifted up for short posts), hence the red CLS scores.

## Approach
There are too many layers between `<FilePage>` and `<DocumentViewer>` to pass the `loading` state around to hide the Comments section, so just make Comments fade in after a 2s delay.

## Changes
- Posts: Add 2s fade-in delay to Comments.
- Posts: remove the gray placeholder. This improves the score a bit more, and reduces flicker as well. There's already a spinner from `FileRenderInline` to tell the user to be patient.
- Posts: add a minimum 30vh height so that short posts don't get collapsed too much, causing the `FileDetails` and Comments to shift. Small shifts are fine as long as CLS is below 0.1.
2021-07-22 10:38:01 +08:00
..
_ads.scss hide logo image on sidebar ads 2021-07-07 18:37:34 -07:00
_animation.scss Revert "Make dropdown menus actually dropdown" 2021-01-29 11:54:39 -05:00
_badge.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
_block-list.scss Moderator Delegation GUI 2021-06-18 15:46:51 -04:00
_button.scss styles 2021-07-19 15:34:46 -04:00
_card.scss Playlist style fixes (#6509) 2021-07-16 15:13:28 -04:00
_channel.scss More master reconciliation 2021-04-27 23:05:38 -04:00
_claim-list.scss Playlist style fixes (#6509) 2021-07-16 15:13:28 -04:00
_claim-search.scss hyperchats 2021-04-23 16:20:17 -04:00
_collection.scss Playlist style fixes (#6509) 2021-07-16 15:13:28 -04:00
_comments.scss Restore comment pagination 2021-07-16 10:54:12 -04:00
_content.scss CodeSplit: Initial work 2021-06-25 16:00:44 +08:00
_dat-gui.scss Fix and enable 3D viewer: #4035 2020-04-27 14:27:04 -04:00
_embed-player.scss refactor floatingUri to allow inline players in comments/markdown 2020-10-21 15:29:29 -04:00
_empty.scss winning claim style pass 2020-12-16 14:58:30 -05:00
_expandable.scss refactor floatingUri to allow inline players in comments/markdown 2020-10-21 15:29:29 -04:00
_file-drop.scss moonpay 2020-06-03 14:16:43 -04:00
_file-list.scss moonpay 2020-06-03 14:16:43 -04:00
_file-properties.scss unify some styles with master 2021-04-27 11:20:41 -04:00
_file-render.scss Improve CLS on Posts 2021-07-22 10:38:01 +08:00
_footer.scss Fix footer in master 2021-06-08 01:19:41 +08:00
_form-field.scss fix recipient address mobile view 2021-05-27 00:54:42 -04:00
_form-row.scss moonpay 2020-06-03 14:16:43 -04:00
_header.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
_icon.scss wip 2021-06-08 13:25:52 -04:00
_item-list.scss moonpay 2020-06-03 14:16:43 -04:00
_livestream.scss more 2021-07-19 13:52:15 -04:00
_main.scss Improve CLS on Posts 2021-07-22 10:38:01 +08:00
_markdown-editor.scss Fix broken markdown editor border color 2021-02-26 11:04:25 -05:00
_markdown-preview.scss Markdown editor tweaks (#6096) 2021-05-20 15:31:14 -04:00
_media.scss Fix mobile view with long descriptions 2021-05-14 13:51:55 -04:00
_meme.scss meme style 2021-07-19 14:17:43 -04:00
_modal.scss Revert "Open the actual image when clicking on the image viewer" 2021-02-19 14:05:51 -05:00
_navigation.scss adjust channel staked indicator in side navigation 2021-06-17 10:28:16 -04:00
_notification.scss Fix notification color. 2021-06-10 10:21:50 -04:00
_nudge.scss wip 2021-04-27 11:20:41 -04:00
_pagination.scss moonpay 2020-06-03 14:16:43 -04:00
_placeholder.scss fix placeholder tile margin 2021-03-08 14:05:02 -05:00
_post.scss Posts: restore "Tip unlock | Claim details" component (#6051) 2021-05-12 14:26:47 -04:00
_progress.scss add youtube sync to first run 2020-09-29 17:12:32 -04:00
_purchase.scss unify some styles with master 2021-04-27 11:20:41 -04:00
_search.scss Fix recommended tab style issues 2021-07-08 16:08:13 -04:00
_share.scss use web share api 2020-03-30 15:49:45 -04:00
_snack-bar.scss Fix recommended tab style issues 2021-07-08 16:08:13 -04:00
_spinner.scss moonpay 2020-06-03 14:16:43 -04:00
_splash.scss moonpay 2020-06-03 14:16:43 -04:00
_status-bar.scss Fix css "--spacing-?" renaming that recent PRs missed during the merge. 2020-06-04 10:53:32 -04:00
_stripe-card.scss Stripe 2 2021-07-17 13:19:33 -04:00
_superchat.scss hyperchats 2021-04-23 16:20:17 -04:00
_syntax-highlighter.scss Add integrated light theme 2020-02-07 09:21:28 -05:00
_table.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
_tags.scss Moderator Delegation GUI 2021-06-18 15:46:51 -04:00
_tooltip.scss add channel staked amount indicator on channel thumbnails 2021-02-18 01:14:39 -05:00
_txo-list.scss Re-add ability to export transactions (#5899) 2021-04-23 12:10:37 -04:00
_videojs.scss Revert lazy-loading videojs 2021-07-06 17:04:16 +08:00
_wallet-tip-send.scss updated code 2021-07-03 14:42:37 -04:00
_wunderbar.scss unify some styles with master 2021-04-27 11:20:41 -04:00
_yrbl.scss New repost flow 2020-12-16 09:47:28 -05:00
expanding-details.scss moonpay 2020-06-03 14:16:43 -04:00
menu-button.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
nag.scss wip 2021-04-27 11:20:41 -04:00
section.scss more 2021-07-19 13:52:15 -04:00
tabs.scss extra collection publish buttons, styling 2021-06-15 18:37:35 -04:00