From a613f28bc89a404be67e62c8a517e0bf321deaac Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sun, 30 May 2021 14:01:00 +0800
Subject: [PATCH] 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 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.
---
 ui/component/loginGraphic/index.jsx | 29 ++++++++++++++++++++++++++---
 ui/scss/component/_main.scss        |  5 +++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/ui/component/loginGraphic/index.jsx b/ui/component/loginGraphic/index.jsx
index 7b5f888da..003352735 100644
--- a/ui/component/loginGraphic/index.jsx
+++ b/ui/component/loginGraphic/index.jsx
@@ -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>
   );
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index af73b85ff..5d5eadb84 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -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%;