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
This commit is contained in:
Srinath Narayanan 2020-07-15 09:53:06 -07:00 committed by GitHub
parent db0b478eb0
commit 543ae9fe4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions

View File

@ -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
})}