From 3243ce6e0a93807678f15d631ecb2dffcaeae7f1 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 19 Jul 2021 14:26:00 +0800
Subject: [PATCH] Image Claims: minimum layout shift on desktop layout

## Issue
6068

## Change
Lock all images to fit a 16:9 container. We have implemented 'ZoomableImg', so no reason in trying to display in full size.

This reduces CLS from 0.4xx to 0.01x.

## Flaws
CLS could probably be zero if not for the spinner shifting things slightly. Also, mobile CLS is 0.07.

The troublesome part in this PR is that FileRenderInitiator, FileRender and their subcomponents are broken apart and it's hard to synchronize their visibility and size. There are time gaps where none of them are visible, etc.

This PR only tackles the major part (most bang for buck), which is the elimination of variable height of the rendered image.

## Aside
I think `claimIsMine` is unused, so don't waste time requesting it.
---
 ui/page/file/index.js               |  2 --
 ui/page/file/view.jsx               | 12 ++++++++++++
 ui/scss/component/_file-render.scss |  5 +++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/page/file/index.js b/ui/page/file/index.js
index 99396ea0a..6d8515fb0 100644
--- a/ui/page/file/index.js
+++ b/ui/page/file/index.js
@@ -8,7 +8,6 @@ import {
   makeSelectClaimIsNsfw,
   SETTINGS,
   makeSelectTagInClaimOrChannelForUri,
-  makeSelectClaimIsMine,
   makeSelectClaimIsStreamPlaceholder,
   makeSelectCollectionForId,
   COLLECTIONS_CONSTS,
@@ -35,7 +34,6 @@ const select = (state, props) => {
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
     commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
-    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
     collection: makeSelectCollectionForId(collectionId)(state),
     collectionId,
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 2df16ad9c..a75d497da 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -115,6 +115,18 @@ function FilePage(props: Props) {
       );
     }
 
+    if (renderMode === RENDER_MODES.IMAGE) {
+      return (
+        <React.Fragment>
+          <div className="file-render--img-container">
+            <FileRenderInitiator uri={uri} />
+            <FileRenderInline uri={uri} />
+          </div>
+          <FileTitleSection uri={uri} />
+        </React.Fragment>
+      );
+    }
+
     return (
       <React.Fragment>
         <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 4b1898341..14226fba5 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -100,6 +100,11 @@
   max-height: none;
 }
 
+.file-render--img-container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
 .file-render__header {
   display: flex;
   justify-content: space-between;