From 8dc5ed590a8d33a1c33867994204a279db5c6fd5 Mon Sep 17 00:00:00 2001
From: Srinath Narayanan <srnara@microsoft.com>
Date: Fri, 5 Feb 2021 11:32:26 -0800
Subject: [PATCH] Added Spinner for public gallery (#427)

* Added more publish changes

* addressed PR comments

* fixed lint errors

Co-authored-by: Tanuj Mittal <tamitta@microsoft.com>
---
 .../Cards/GalleryCardComponent.tsx            |  2 +-
 .../GalleryViewerComponent.tsx                | 74 +++++++++++++------
 .../GalleryViewerComponent.test.tsx.snap      | 16 +---
 src/Shared/Telemetry/TelemetryProcessor.ts    |  2 +-
 4 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
index 3ba3e8e88..333905659 100644
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -161,7 +161,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     return (
       <Text
         variant="tiny"
-        styles={{ root: { color: StyleConstants.BaseMedium, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
+        styles={{ root: { color: StyleConstants.BaseMediumHigh, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
       >
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
index 825dedca3..4fe41075f 100644
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -15,6 +15,8 @@ import {
   Pivot,
   PivotItem,
   SearchBox,
+  Spinner,
+  SpinnerSize,
   Stack,
   Text,
 } from "office-ui-fabric-react";
@@ -69,6 +71,8 @@ interface GalleryViewerComponentState {
   searchText: string;
   dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
+  isFetchingPublishedNotebooks: boolean;
+  isFetchingFavouriteNotebooks: boolean;
 }
 
 interface GalleryTabInfo {
@@ -118,6 +122,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       searchText: props.searchText,
       dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
+      isFetchingFavouriteNotebooks: true,
+      isFetchingPublishedNotebooks: true,
     };
 
     this.sortingOptions = [
@@ -274,36 +280,52 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
+  private getFavouriteNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingFavouriteNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "ContactHeart",
+        <>You don&apos;t have any favorites yet</>,
+        <>
+          Favorite any notebook from the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.OfficialSamples })}>official samples</Link> or{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link>
+        </>
+      );
+    }
+    return this.createSearchBarHeader(this.createCardsTabContent(data));
+  };
+
   private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.isEmptyData(data)
-        ? this.createEmptyTabContent(
-            "ContactHeart",
-            <>You don&apos;t have any favorites yet</>,
-            <>
-              Favorite any notebook from the{" "}
-              <Link onClick={() => this.setState({ selectedTab: GalleryTab.OfficialSamples })}>official samples</Link>{" "}
-              or <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link>
-            </>
-          )
-        : this.createSearchBarHeader(this.createCardsTabContent(data)),
+      content: this.getFavouriteNotebooksTabContent(data),
     };
   }
 
+  private getPublishedNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingPublishedNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "Contact",
+        <>
+          You have not published anything to the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link> yet
+        </>,
+        <>Publish your notebooks to share your work with other users</>
+      );
+    }
+    return this.createPublishedNotebooksTabContent(data);
+  };
+
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.isEmptyData(data)
-        ? this.createEmptyTabContent(
-            "Contact",
-            <>
-              You have not published anything to the{" "}
-              <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link> yet
-            </>,
-            <>Publish your notebooks to share your work with other users</>
-          )
-        : this.createPublishedNotebooksTabContent(data),
+      content: this.getPublishedNotebooksTabContent(data),
     };
   };
 
@@ -396,7 +418,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private createCardsTabContent(data: IGalleryItem[]): JSX.Element {
-    return (
+    return data ? (
       <FocusZone>
         <List
           items={data}
@@ -405,6 +427,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           onRenderCell={this.onRenderCell}
         />
       </FocusZone>
+    ) : (
+      <Spinner size={SpinnerSize.large} />
     );
   }
 
@@ -505,6 +529,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadFavoriteNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingFavouriteNotebooks: true });
         const response = await this.props.junoClient.getFavoriteNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading favorite notebooks`);
@@ -515,6 +540,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         trace(Action.NotebooksGalleryFavoritesCount, ActionModifiers.Mark, { count: this.favoriteNotebooks?.length });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadFavoriteNotebooks", "Failed to load favorite notebooks");
+      } finally {
+        this.setState({ isFetchingFavouriteNotebooks: false });
       }
     }
 
@@ -533,6 +560,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublishedNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingPublishedNotebooks: true });
         const response = await this.props.junoClient.getPublishedNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading published notebooks`);
@@ -549,6 +577,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadPublishedNotebooks", "Failed to load published notebooks");
+      } finally {
+        this.setState({ isFetchingPublishedNotebooks: false });
       }
     }
 
diff --git a/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap b/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
index 760df58ea..3e79102ec 100644
--- a/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
@@ -79,19 +79,9 @@ exports[`GalleryViewerComponent renders 1`] = `
           </StackItem>
         </Stack>
         <StackItem>
-          <FocusZone
-            direction={2}
-            isCircularNavigation={false}
-            shouldRaiseClicks={true}
-          >
-            <List
-              getPageSpecification={[Function]}
-              onRenderCell={[Function]}
-              renderedWindowsAhead={3}
-              renderedWindowsBehind={2}
-              startIndex={0}
-            />
-          </FocusZone>
+          <StyledSpinnerBase
+            size={3}
+          />
         </StackItem>
       </Stack>
     </PivotItem>
diff --git a/src/Shared/Telemetry/TelemetryProcessor.ts b/src/Shared/Telemetry/TelemetryProcessor.ts
index fe7675b5c..82ec53b5e 100644
--- a/src/Shared/Telemetry/TelemetryProcessor.ts
+++ b/src/Shared/Telemetry/TelemetryProcessor.ts
@@ -12,7 +12,7 @@ import { getDataExplorerWindow } from "../../Utils/WindowUtils";
 
 type TelemetryData = { [key: string]: unknown };
 
-export function trace(action: Action, actionModifier: string = ActionModifiers.Mark, data?: TelemetryData): void {
+export function trace(action: Action, actionModifier: string = ActionModifiers.Mark, data: TelemetryData = {}): void {
   sendMessage({
     type: MessageTypes.TelemetryInfo,
     data: {