LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Home: prevent layout shift from ads

Browse source 
## Issue
The ad tile causes a layout shift on certain screen/zoom, pushing CLS from green to red.

## Change
- Do replacement instead of insertion.
- Fixed "null lastCard" flow warning instead of suppressing it.
This commit is contained in:
infinite-persistence 2021-12-16 15:11:58 +08:00 committed by Thomas Zarebczan
parent d2385b70ec
commit fe3bbb0c70
1 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/page/home/view.jsx
View file

@ -130,7 +130,7 @@ function HomePage(props: Props) {
return; return;
} }
(async function () { (async () => {
// test if adblock is enabled // test if adblock is enabled
let adBlockEnabled = false; let adBlockEnabled = false;
const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
@ -166,6 +166,7 @@ function HomePage(props: Props) {
if (!isFullyVisible) break; if (!isFullyVisible) break;
lastCard = card; lastCard = card;
} }
if (!lastCard) return;
} }
// clone the last card // clone the last card
@ -176,10 +177,6 @@ function HomePage(props: Props) {
// $FlowFixMe // $FlowFixMe
lastCard.parentNode.insertBefore(clonedCard, lastCard); lastCard.parentNode.insertBefore(clonedCard, lastCard);
// delete last card so that it doesn't mess up formatting
// $FlowFixMe
// lastCard.remove();
// change the appearance of the cloned card // change the appearance of the cloned card
// $FlowFixMe // $FlowFixMe
clonedCard.querySelector('.claim__menu-button').remove(); clonedCard.querySelector('.claim__menu-button').remove();
@ -215,14 +212,11 @@ function HomePage(props: Props) {
// show the homepage ad which is not displayed at first // show the homepage ad which is not displayed at first
document.getElementsByClassName('homepageAdContainer')[0].style.display = 'block'; document.getElementsByClassName('homepageAdContainer')[0].style.display = 'block';
// $FlowFixMe const thumbnail = window.getComputedStyle(lastCard.querySelector('.media__thumb'));
const imageHeight = window.getComputedStyle(lastCard.querySelector('.media__thumb')).height;
// $FlowFixMe
const imageWidth = window.getComputedStyle(lastCard.querySelector('.media__thumb')).width;
const styles = `#av-container, #AVcontent, #aniBox { const styles = `#av-container, #AVcontent, #aniBox {
height: ${imageHeight} !important; height: ${thumbnail.height} !important;
width: ${imageWidth} !important; width: ${thumbnail.width} !important;
}`; }`;
const styleSheet = document.createElement('style'); const styleSheet = document.createElement('style');
@ -231,6 +225,9 @@ function HomePage(props: Props) {
styleSheet.innerText = styles; styleSheet.innerText = styles;
// $FlowFixMe // $FlowFixMe
document.head.appendChild(styleSheet); document.head.appendChild(styleSheet);
// delete last card to not introduce layout shifts
lastCard.remove();
} }
} }
checkFlag(); checkFlag();