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