#netpyne-132 adding spinner for plots that takes time to load (ny model download)

Author: ddelpiano

webapp/components/general/HTMLViewer.js

@@ -3,6 +3,8 @@ import React, { Component, createRef } from 'react';
 import HTMLViewer from '@metacell/geppetto-meta-ui/html-viewer/HTMLViewer';
 
 import { withStyles } from '@material-ui/core/styles';
+import { CircularProgress } from '@material-ui/core';
+import { primaryColor } from '../../theme';
 
 const style = ({ palette }) => ({
   container: {
@@ -44,7 +46,7 @@ class CustomHTMLViewer extends Component {
 
   getSvgComponent () {
     // svg element
-    return this.containerRef.current.children[0].children[0].children[0];
+    return this.containerRef?.current?.children[0]?.children[0]?.children[0];
   }
 
   wasParentResized (dimensions) {
@@ -77,7 +79,20 @@ class CustomHTMLViewer extends Component {
   }
 
   render () {
-    const { classes } = this.props;
+    const { classes, content } = this.props;
+    if (content === undefined) {
+      return (
+        <CircularProgress
+          color={primaryColor}
+          style={{
+            position: 'absolute',
+            margin: 'auto',
+            top: '50%',
+            left: '50%',
+          }}
+        />
+      );
+    }
     return (
       <div id="plot" className={classes.container} ref={this.containerRef}>
         <HTMLViewer {...this.props} style={{ backgroundColor: 'inherit' }} />