From 222287d4b7b07c345b0aca88f5e605ec8935ba31 Mon Sep 17 00:00:00 2001
From: Yamboy1 <yamboyd1@gmail.com>
Date: Sun, 19 Jan 2020 17:08:40 +1300
Subject: [PATCH] Fix sizing for html files and add loading indicator

---
 ui/component/viewers/htmlViewer.jsx | 34 +++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/ui/component/viewers/htmlViewer.jsx b/ui/component/viewers/htmlViewer.jsx
index 2ea30d75d..6ed045a15 100644
--- a/ui/component/viewers/htmlViewer.jsx
+++ b/ui/component/viewers/htmlViewer.jsx
@@ -1,21 +1,47 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { stopContextMenu } from 'util/context-menu';
 
 type Props = {
   source: string,
 };
 
-class HtmlViewer extends React.PureComponent<Props> {
+type State = {
+  loading: boolean,
+};
+
+class HtmlViewer extends React.PureComponent<Props, State> {
+  iframe: React.ElementRef<any>;
+  constructor(props: Props) {
+    super(props);
+    this.state = { loading: true };
+    this.iframe = React.createRef();
+  }
+
+  componentDidMount() {
+    const resize = () => {
+      const { scrollHeight, scrollWidth } = this.iframe.current.contentDocument.body;
+      this.iframe.current.style.height = `${scrollHeight}px`;
+      this.iframe.current.style.width = `${scrollWidth}px`;
+    };
+    this.iframe.current.onload = () => {
+      this.setState({ loading: false });
+      resize();
+    };
+    this.iframe.current.resize = () => resize();
+  }
+
   render() {
     const { source } = this.props;
+    const { loading } = this.state;
     return (
       <div className="file-render__viewer" onContextMenu={stopContextMenu}>
+        {loading && <div className="placeholder--text-document" />}
         {/* @if TARGET='app' */}
-        <iframe sandbox="" title={__('File preview')} src={`file://${source}`} />
+        <iframe ref={this.iframe} hidden={loading} sandbox="" title={__('File preview')} src={`file://${source}`} />
         {/* @endif */}
         {/* @if TARGET='web' */}
-        <iframe sandbox="" title={__('File preview')} src={source} />
+        <iframe ref={this.iframe} hidden={loading} sandbox="" title={__('File preview')} src={source} />
         {/* @endif */}
       </div>
     );