random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
View File

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