Spinner for initial tab loading

less/TableStyles/queryBuilder.less

@@ -6,7 +6,7 @@
   display: table;
   display: none;
   width: 100%;
-    border-top: 1px solid #DDDDDD;
+  border-top: 1px solid #dddddd;
   /*[{environment-commandbar-toolbar-separator}]*/
   background-color: #ffffff;
   /*[{plugin-background-color}]*/
@@ -34,7 +34,7 @@
 }
 
 .query-builder {
-    width:100%;
+  width: 100%;
   padding-right: @DefaultSpace;
   border-bottom: 1px solid @BaseMedium;
   margin-bottom: @DefaultSpace;
@@ -45,7 +45,7 @@
   /*[{plugin-background-color}]*/
   min-width: 600px;
   height: 30px;
-    border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid #dddddd;
   /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }
 
@@ -70,14 +70,14 @@
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-    background-color: #CCCEDB;
+  background-color: #cccedb;
   /*[{common-controls-button-hover-background}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-    background-color: #E6E7ED;
+  background-color: #e6e7ed;
   /*[{common-controls-inner-tab-active-background}]*/
-    outline: none
+  outline: none;
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
@@ -96,10 +96,12 @@
   .flex-direction();
 }
 
-.tablesQueryTab{
+.tablesQueryTab {
   padding-left: @MediumSpace;
   width: 100%;
-    margin-bottom:@LargeSpace;
+  margin-bottom: @LargeSpace;
+  position: relative;
+  height: 100%;
 }
 
 .entity-error-Img {
@@ -120,7 +122,7 @@
 .query-editor-text {
   width: 100%;
   margin: 2px;
-    border: solid 1px #A9ACB3;
+  border: solid 1px #a9acb3;
   /*[{plugin-textbox-disabled-color}]*/
   resize: none;
   margin-top: -39px;
@@ -169,7 +171,7 @@
   margin-left: 2px;
 }
 
-.advanced-options-panel{
+.advanced-options-panel {
   margin-bottom: @DefaultSpace;
 }
 
@@ -201,9 +203,9 @@ input::-webkit-inner-spin-button {
 .advanced-options-panel .advanced-options .top .top-input {
   width: 100px;
   word-spacing: normal;
-    color: #1E1E1E;
+  color: #1e1e1e;
   /*[{common-controls-button-foreground}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
   /*[1px solid {plugin-textbox-border-color}]*/
   height: 20px;
   margin-left: 8px;
@@ -257,9 +259,9 @@ input::-webkit-inner-spin-button {
   vertical-align: middle;
 }
 
-.action-column>button,
+.action-column > button,
-.group-control-header>button,
+.group-control-header > button,
-.group-indicator-column>button {
+.group-indicator-column > button {
   min-width: 20px;
   width: 20px;
   padding: 0px;
@@ -268,7 +270,7 @@ input::-webkit-inner-spin-button {
   cursor: pointer;
 }
 
-.group-control-header>button:disabled {
+.group-control-header > button:disabled {
   min-width: 20px;
   width: 20px;
   padding: 0px;
@@ -312,14 +314,14 @@ input::-webkit-inner-spin-button {
 .operator-label {
   margin-left: 80px;
 }
-.value-label{
+.value-label {
   margin-left: 62px;
 }
 
 .scroll-box {
-    border-bottom: 1px transparent #DDD;
+  border-bottom: 1px transparent #ddd;
   /*[1px solid {plugin-table-border-color}]*/
-    border-top: 1px transparent #DDD;
+  border-top: 1px transparent #ddd;
   /*[1px solid {plugin-table-border-color}]*/
   max-height: 20vh;
   width: 100%;
@@ -384,7 +386,7 @@ input::-webkit-inner-spin-button {
 
 .group-indicator-table {
   border-spacing: 0px;
-    min-height: 24px
+  min-height: 24px;
 }
 
 .group-indicator-column {
@@ -414,7 +416,6 @@ input::-webkit-inner-spin-button {
   background-color: #ffffff;
 }
 
-
 /*.type-header {
     padding-right: 4px;
 }
@@ -428,9 +429,9 @@ input::-webkit-inner-spin-button {
 }*/
 
 .clause-table-field[readonly] {
-    background-color: #EEEEF2;
+  background-color: #eeeef2;
   /*[{plugin-table-header-background-color}]*/
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
   /*[{plugin-table-border-color}]*/
 }
 
@@ -480,11 +481,11 @@ input::-webkit-inner-spin-button {
 
 .query-panel .divider.horizontal {
   height: 10px;
-    width: 100%
+  width: 100%;
 }
 
 .inline-div {
-    display: inline
+  display: inline;
 }
 
 .querybuilder-addpropertyImg,
@@ -516,7 +517,7 @@ input::-webkit-inner-spin-button {
 }
 
 .query-builder-isDisabled {
-    border: 1px solid #CCCEDB;
+  border: 1px solid #cccedb;
   color: #ccc;
 }
 
@@ -533,7 +534,6 @@ input::-webkit-inner-spin-button {
   margin-bottom: 5px;
 }
 
-
 /*
 @media only screen and (max-width: 1200px) {
     .clause-table {

src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx

@@ -63,6 +63,7 @@ export interface IQueryTablesTabComponentStates {
   selection: Selection;
   entities: Entities.ITableEntity[];
   headers: string[];
+  isLoading: boolean;
 }
 
 export interface IQueryTableRowsType {

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -7,6 +7,9 @@ import {
   IDropdownStyles,
   Selection,
   SelectionMode,
+  Spinner,
+  SpinnerSize,
+  Text,
 } from "@fluentui/react";
 import * as ko from "knockout";
 import React, { Component } from "react";
@@ -52,6 +55,7 @@ import {
   IQueryTablesTabComponentProps,
   IQueryTablesTabComponentStates,
 } from "./QueryTableTabUtils";
+
 export interface Button {
   visible: boolean;
   enabled: boolean;
@@ -137,33 +141,6 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     super(props);
     this.columns = [];
     this.allQueryTableRows = [];
-    const columns: IColumn[] = [
-      {
-        key: "column1",
-        name: "PartitionKey",
-        minWidth: 100,
-        maxWidth: 200,
-        data: String,
-        fieldName: "partitionKey",
-        // onRender: this.onRenderColumnItem,
-      },
-      {
-        key: "column2",
-        name: "RowKey",
-        minWidth: 100,
-        maxWidth: 200,
-        data: String,
-        fieldName: "rowKey",
-      },
-      {
-        key: "column3",
-        name: "Timestamp",
-        minWidth: 200,
-        maxWidth: 200,
-        data: String,
-        fieldName: "timeStamp",
-      },
-    ];
     this.container = props.collection && props.collection.container;
     this.tableCommands = new TableCommands(this.container);
     this.tableDataClient = this.container.tableDataClient;
@@ -212,7 +189,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         visible: true,
         isSelected: false,
       },
-      columns: columns,
+      columns: this.columns,
       items: [],
       originalItems: [],
       isExpanded: false,
@@ -253,6 +230,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
           timeValue: "",
         },
       ],
+      isLoading: true,
     };
 
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
@@ -462,16 +440,25 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       ", ",
       this.state.selection.getSelection()
     );
+    let timeStamp: string;
     let selectedItems: Entities.ITableEntity[];
     if (this.state.selection.getSelection().length > 0) {
-      selectedItems = this.state.entities.filter(
+      Object.keys(this.state.selection.getSelection()[0]).map((key, index) => {
-        (item) => item["Timestamp"]._ === Object.values(this.state.selection.getSelection()[0])[2]
+        if (key === "Timestamp") {
+          timeStamp = Object.values(this.state.selection.getSelection()[0])[index];
+          console.log(
+            "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 445 ~ QueryTablesTabComponent ~ timeStamp",
+            timeStamp
+          );
+        }
+      });
+      selectedItems = this.state.entities.filter((item) => item["Timestamp"]._ === timeStamp);
+      console.log(
+        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems",
+        selectedItems
       );
-      // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems", selectedItems);
-
       this.setState({
-        // selectionCount: this._selection.getSelectedCount(),
+        selectedItems: selectedItems,
-        selectedItems,
         rowSelected: true,
       });
     }
@@ -577,7 +564,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         columns: this.columns,
         headers,
         operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
-        // queryTableRows: queryTableRowsClone,
+        isLoading: false,
         items: documentItems,
         entities: documents.Results,
         originalItems: documentItems,
@@ -586,7 +573,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       () => {
         if (isInitialLoad) {
           this.loadFilterExample();
-          this.setDefaultItemSelection();
+          // this.setDefaultItemSelection();
         }
       }
     );
@@ -1071,12 +1058,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
   render(): JSX.Element {
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
     const { queryTableRows } = this.state;
-    console.log(
+    // console.log(
-      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 328 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selectedItems",
+    //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 328 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selectedItems",
-      this.state.selectedItems,
+    //   this.state.selectedItems,
-      ", ",
+    //   ", ",
-      [this.state.items[0]]
+    //   [this.state.items[0]]
-    );
+    // );
     return (
       <div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
         <div className="query-builder">
@@ -1270,6 +1257,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         </div>
 
         <div className="tablesQueryTab tableContainer">
+          {this.state.items.length === 0 && this.state.isLoading && (
+            <Spinner size={SpinnerSize.large} className="spinner" />
+          )}
+          {this.state.items.length > 0 && !this.state.isLoading && (
             <DetailsList
               items={this.state.items}
               columns={this.state.columns}
@@ -1279,6 +1270,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
               selection={this.state.selection}
               selectionPreservedOnEmptyClick={true}
             />
+          )}
+          {this.state.items.length === 0 && !this.state.isLoading && (
+            <Text variant="mediumPlus">No data available in table</Text>
+          )}
         </div>
       </div>
     );