Added infinite progress bar when gallery read-only notebook viewer loads (#90)

* Added infinite progress bar when gallery notebook content loads

- reused infinite progress bar from magic commands

* made single quotes to double quotes

* formatting changes

* updated state

* changed to ProgressIndicator

* undo packgae.json change

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,7 +3,7 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { Icon, Link } from "office-ui-fabric-react";
+import { Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import * as Logger from "../../../Common/Logger";
@@ -36,6 +36,7 @@ interface NotebookViewerComponentState {
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
   dialogProps: DialogProps;
+  showProgressBar: boolean;
 }
 
 export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
@@ -65,7 +66,8 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
       content: undefined,
       galleryItem: props.galleryItem,
       isFavorite: props.isFavorite,
-      dialogProps: undefined
+      dialogProps: undefined,
+      showProgressBar: true
     };
 
     this.loadNotebookContent();
@@ -79,12 +81,13 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
     try {
       const response = await fetch(this.props.notebookUrl);
       if (!response.ok) {
+        this.setState({ showProgressBar: false });
         throw new Error(`Received HTTP ${response.status} while fetching ${this.props.notebookUrl}`);
       }
 
       const notebook: Notebook = await response.json();
       this.notebookComponentBootstrapper.setContent("json", notebook);
-      this.setState({ content: notebook });
+      this.setState({ content: notebook, showProgressBar: false });
 
       if (this.props.galleryItem) {
         const response = await this.props.junoClient.increaseNotebookViews(this.props.galleryItem.id);
@@ -95,6 +98,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
         this.setState({ galleryItem: response.data });
       }
     } catch (error) {
+      this.setState({ showProgressBar: false });
       const message = `Failed to load notebook content: ${error}`;
       Logger.logError(message, "NotebookViewerComponent/loadNotebookContent");
       NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
@@ -130,6 +134,8 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
           <></>
         )}
 
+        {this.state.showProgressBar && <ProgressIndicator />}
+
         {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
           hideInputs: this.props.hideInputs
         })}