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

Login graphic improvements

Browse source 
1. Lock the width of the second pane so that the layout doesn't shift after the image is fetched.
2. The image is huge, so pass through the optimizer.
  - Wait until the container is mounted to get the exact image width.

Unfortunately, it still takes 0.8s on average to fetch the image, regardless of how small the image has been optimized.
Login graphic improvements

1. Lock the width of the second pane so that the layout doesn't shift after the image is fetched.
2. The image is huge, so pass through the optimizer.
  - Wait until the container is mounted to get the exact image width.

Unfortunately, it still takes 1s (on average) to fetch the image, regardless of how small the image has been optimized.
This commit is contained in:
infinite-persistence 2021-05-30 14:01:00 +08:00 committed by infinite-persistence
parent eb4e80d56b
commit a613f28bc8
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/component/loginGraphic/index.jsx
View file

@ -1,13 +1,36 @@
// @flow
import React from 'react';
import { SITE_NAME, LOGIN_IMG_URL } from 'config';
import { getThumbnailCdnUrl } from 'util/thumbnail';
function LoginGraphic(props: any) {
const [error, setError] = React.useState(false);
const src = LOGIN_IMG_URL;
const [src, setSrc] = React.useState('---');
const containerRef = React.useRef<any>();
const imgUrl = LOGIN_IMG_URL;
return error || !src ? null : (
<div className="signup-image">
React.useEffect(() => {
if (containerRef.current && containerRef.current.parentElement && containerRef.current.parentElement.offsetWidth) {
const newWidth = containerRef.current.parentElement.offsetWidth;
let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
// @if TARGET='web'
// Pass image urls through a compression proxy, except for GIFs.
newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
// @endif
setSrc(newSrc);
} else {
setSrc(imgUrl);
}
}, []);
if (error || !imgUrl) {
return null;
}
return (
<div className="signup-image" ref={containerRef}>
<img alt={__('%SITE_NAME% login image', { SITE_NAME })} src={src} onError={() => setError(true)} />
</div>
);

5
ui/scss/component/_main.scss
View file

@ -336,12 +336,17 @@
max-width: 47rem;
.card__second-pane {
width: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-login-graphic-background);
@media (max-width: $breakpoint-small) {
width: 100%;
}
.signup-image {
@media (max-width: $breakpoint-small) {
width: 50%;