Fix sizing for html files and add loading indicator

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>
     );