diff --git a/projects/components/src/table/data/table-cdk-data-source.ts b/projects/components/src/table/data/table-cdk-data-source.ts
index b3df3334e..03ef8e194 100644
--- a/projects/components/src/table/data/table-cdk-data-source.ts
+++ b/projects/components/src/table/data/table-cdk-data-source.ts
@@ -33,10 +33,9 @@ export class TableCdkDataSource implements DataSource<TableRow> {
   private readonly cachedValues: Map<string, unknown[]> = new Map<string, unknown[]>();
   private lastRowChange: StatefulTableRow | undefined;
   private readonly rowsChange$: Subject<StatefulTableRow[]> = new Subject<StatefulTableRow[]>();
-  private readonly loadingStateSubject: Subject<Observable<StatefulTableRow[]>> = new Subject<
-    Observable<StatefulTableRow[]>
-  >();
-  public loadingStateChange$: Observable<Observable<StatefulTableRow[]>> = this.loadingStateSubject.asObservable();
+  private readonly loadingStateSubject: Subject<TableLoadingState> = new Subject<TableLoadingState>();
+
+  public loadingStateChange$: Observable<TableLoadingState> = this.loadingStateSubject.asObservable();
 
   public constructor(
     private readonly tableDataSourceProvider: TableDataSourceProvider,
@@ -54,7 +53,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
   public connect(): Observable<ReadonlyArray<TableRow>> {
     this.buildChangeObservable()
       .pipe(
-        tap(() => this.loadingStateSubject.next(NEVER)),
+        tap(() => this.loadingStateSubject.next({ loading$: NEVER })),
         mergeMap(([columnConfigs, pageEvent, filters, changedColumn, changedRow]) =>
           this.buildDataObservable(columnConfigs, pageEvent, filters, changedColumn, changedRow)
         )
@@ -64,7 +63,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     return this.rowsChange$.pipe(
       tap(rows => this.cacheRows(rows)),
       tap(rows => this.cacheFilterableValues(rows)),
-      tap(rows => this.loadingStateSubject.next(of(rows)))
+      tap(rows => this.loadingStateSubject.next({ loading$: of(rows), hide: rows.length > 1 }))
     );
   }
 
@@ -264,7 +263,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
           : rows
       ),
       catchError(error => {
-        this.loadingStateSubject.next(throwError(error));
+        this.loadingStateSubject.next({ loading$: throwError(error) });
 
         return [];
       })
@@ -324,3 +323,8 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     }
   }
 }
+
+export interface TableLoadingState {
+  loading$: Observable<StatefulTableRow[]>;
+  hide?: boolean;
+}
diff --git a/projects/components/src/table/table.component.scss b/projects/components/src/table/table.component.scss
index 9f2dc0330..015680d7e 100644
--- a/projects/components/src/table/table.component.scss
+++ b/projects/components/src/table/table.component.scss
@@ -1,11 +1,12 @@
 @import 'mixins';
 @import 'layout';
 
-:host {
+.table {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
+  position: relative;
 }
 
 .title-row {
@@ -18,6 +19,7 @@
 
 .table {
   width: 100%;
+  flex: 1 1 0;
   overflow: auto;
 }
 
@@ -108,7 +110,10 @@
 }
 
 .state-watcher {
-  flex: 1 1;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background: transparent;
 }
 
 .pagination-controls {
diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts
index 56058d7ee..dca6e127c 100644
--- a/projects/components/src/table/table.component.ts
+++ b/projects/components/src/table/table.component.ts
@@ -46,116 +46,129 @@ import {
 } from './table-api';
 import { TableColumnConfigExtended, TableService } from './table.service';
 
-// tslint:disable max-file-line-count
+// tslint:disable: template-cyclomatic-complexity component-max-inline-declarations max-file-line-count
 @Component({
   selector: 'ht-table',
   styleUrls: ['./table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <cdk-table
-      *ngIf="this.dataSource"
-      [multiTemplateDataRows]="this.isDetailType()"
-      [dataSource]="this.dataSource"
-      [ngClass]="[this.display, this.pageable && this.isTableFullPage ? 'bottom-margin' : '']"
-      class="table"
-    >
-      <!-- Columns -->
-      <div *ngFor="let columnDef of this.columnConfigs$ | async; trackBy: this.trackItem; index as index">
-        <ng-container [cdkColumnDef]="columnDef.id">
-          <cdk-header-cell
-            *cdkHeaderCellDef
-            [style.flex-basis]="columnDef.width"
-            [style.max-width]="columnDef.width"
-            class="header-cell"
-          >
-            <div
-              *ngIf="index !== 0"
-              class="header-column-resize-handle"
-              (mousedown)="this.onResizeMouseDown($event, index)"
+    <div class="table">
+      <cdk-table
+        *ngIf="this.dataSource"
+        [multiTemplateDataRows]="this.isDetailType()"
+        [dataSource]="this.dataSource"
+        [ngClass]="[this.display, this.pageable && this.isTableFullPage ? 'bottom-margin' : '']"
+        class="table"
+      >
+        <!-- Columns -->
+        <div *ngFor="let columnDef of this.columnConfigs$ | async; trackBy: this.trackItem; index as index">
+          <ng-container [cdkColumnDef]="columnDef.id">
+            <cdk-header-cell
+              *cdkHeaderCellDef
+              [style.flex-basis]="columnDef.width"
+              [style.max-width]="columnDef.width"
+              class="header-cell"
             >
-              <div class="header-column-divider"></div>
-            </div>
-            <ht-table-header-cell-renderer
-              class="header-cell-renderer"
-              [metadata]="this.metadata"
-              [columnConfig]="columnDef"
-              [index]="index"
-              [sort]="columnDef.sort"
-              (sortChange)="this.onHeaderCellClick(columnDef)"
+              <div
+                *ngIf="index !== 0"
+                class="header-column-resize-handle"
+                (mousedown)="this.onResizeMouseDown($event, index)"
+              >
+                <div
+                  *ngIf="index !== 0"
+                  class="header-column-resize-handle"
+                  (mousedown)="this.onResizeMouseDown($event, index)"
+                >
+                  <div class="header-column-divider"></div>
+                </div>
+                <ht-table-header-cell-renderer
+                  class="header-cell-renderer"
+                  [metadata]="this.metadata"
+                  [columnConfig]="columnDef"
+                  [index]="index"
+                  [sort]="columnDef.sort"
+                  (sortChange)="this.onHeaderCellClick(columnDef)"
+                >
+                </ht-table-header-cell-renderer>
+              </div>
+            </cdk-header-cell>
+            <cdk-cell
+              *cdkCellDef="let row"
+              [style.flex-basis]="columnDef.width"
+              [style.max-width]="columnDef.width"
+              [style.margin-left]="this.indent(columnDef, row)"
+              [ngClass]="{
+                'child-row': this.isChildRow(row),
+                'expander-column': this.isExpanderColumn(columnDef),
+                'detail-expanded': this.isDetailExpanded(row)
+              }"
+              class="data-cell"
             >
-            </ht-table-header-cell-renderer>
-          </cdk-header-cell>
-          <cdk-cell
-            *cdkCellDef="let row"
-            [style.flex-basis]="columnDef.width"
-            [style.max-width]="columnDef.width"
-            [style.margin-left]="this.indent(columnDef, row)"
-            [ngClass]="{
-              'child-row': this.isChildRow(row),
-              'expander-column': this.isExpanderColumn(columnDef),
-              'detail-expanded': this.isDetailExpanded(row)
-            }"
-            class="data-cell"
-          >
-            <ht-table-data-cell-renderer
-              class="data-cell-renderer"
-              [metadata]="this.metadata"
-              [columnConfig]="columnDef"
-              [index]="this.columnIndex(columnDef, index)"
-              [rowData]="row"
-              [cellData]="row[columnDef.id]"
-              (click)="this.onDataCellClick(row)"
-            ></ht-table-data-cell-renderer>
+              <ht-table-data-cell-renderer
+                class="data-cell-renderer"
+                [metadata]="this.metadata"
+                [columnConfig]="columnDef"
+                [index]="this.columnIndex(columnDef, index)"
+                [rowData]="row"
+                [cellData]="row[columnDef.id]"
+                (click)="this.onDataCellClick(row)"
+              ></ht-table-data-cell-renderer>
+            </cdk-cell>
+          </ng-container>
+        </div>
+
+        <!-- Expandable Detail Column -->
+        <ng-container [cdkColumnDef]="this.expandedDetailColumnConfig.id" *ngIf="this.isDetailType()">
+          <cdk-cell *cdkCellDef="let row" [attr.colspan]="this.columnConfigsSubject.value.length" class="expanded-cell">
+            <ht-table-expanded-detail-row-cell-renderer
+              *ngIf="this.isRowExpanded(row)"
+              [row]="row"
+              [expanded]="this.isRowExpanded(row)"
+              [content]="this.detailContent"
+            ></ht-table-expanded-detail-row-cell-renderer>
           </cdk-cell>
         </ng-container>
-      </div>
 
-      <!-- Expandable Detail Column -->
-      <ng-container [cdkColumnDef]="this.expandedDetailColumnConfig.id" *ngIf="this.isDetailType()">
-        <cdk-cell *cdkCellDef="let row" [attr.colspan]="this.columnConfigsSubject.value.length" class="expanded-cell">
-          <ht-table-expanded-detail-row-cell-renderer
-            *ngIf="this.isRowExpanded(row)"
-            [row]="row"
-            [expanded]="this.isRowExpanded(row)"
-            [content]="this.detailContent"
-          ></ht-table-expanded-detail-row-cell-renderer>
-        </cdk-cell>
-      </ng-container>
+        <!-- Header Row -->
+        <ng-container *ngIf="this.isShowHeader()">
+          <cdk-header-row *cdkHeaderRowDef="this.visibleColumns()" class="header-row"></cdk-header-row>
+        </ng-container>
 
-      <!-- Header Row -->
-      <ng-container *ngIf="this.isShowHeader()">
-        <cdk-header-row *cdkHeaderRowDef="this.visibleColumns()" class="header-row"></cdk-header-row>
-      </ng-container>
+        <!-- Data Rows -->
+        <cdk-row
+          *cdkRowDef="let row; columns: this.visibleColumns()"
+          (mouseenter)="this.onDataRowMouseEnter(row)"
+          (mouseleave)="this.onDataRowMouseLeave()"
+          [ngClass]="{ 'selected-row': this.shouldHighlightRowAsSelection(row), 'hovered-row': this.isHoveredRow(row) }"
+          class="data-row"
+        ></cdk-row>
+
+        <!-- Expandable Detail Rows -->
+        <ng-container *ngIf="this.isDetailType()">
+          <cdk-row *cdkRowDef="let row; columns: [this.expandedDetailColumnConfig.id]" class="expandable-row"></cdk-row>
+        </ng-container>
+      </cdk-table>
 
-      <!-- Data Rows -->
-      <cdk-row
-        *cdkRowDef="let row; columns: this.visibleColumns()"
-        (mouseenter)="this.onDataRowMouseEnter(row)"
-        (mouseleave)="this.onDataRowMouseLeave()"
-        [ngClass]="{ 'selected-row': this.shouldHighlightRowAsSelection(row), 'hovered-row': this.isHoveredRow(row) }"
-        class="data-row"
-      ></cdk-row>
-
-      <!-- Expandable Detail Rows -->
-      <ng-container *ngIf="this.isDetailType()">
-        <cdk-row *cdkRowDef="let row; columns: [this.expandedDetailColumnConfig.id]" class="expandable-row"></cdk-row>
+      <!-- State Watcher -->
+      <ng-container *ngIf="this.dataSource?.loadingStateChange$ | async as loadingState">
+        <div class="state-watcher" *ngIf="!loadingState.hide">
+          <ng-container class="state-watcher" *htLoadAsync="loadingState.loading$"></ng-container>
+        </div>
       </ng-container>
-    </cdk-table>
-
-    <!-- State Watcher -->
-    <div class="state-watcher">
-      <ng-container class="state-watcher" *htLoadAsync="this.dataSource?.loadingStateChange$ | async"></ng-container>
-    </div>
-
-    <!-- Pagination -->
-    <div class="pagination-controls" *ngIf="this.pageable" [style.position]="this.isTableFullPage ? 'fixed' : 'sticky'">
-      <ht-paginator
-        *htLetAsync="this.urlPageData$ as pageData"
-        (pageChange)="this.onPageChange($event)"
-        [pageSizeOptions]="this.pageSizeOptions"
-        [pageSize]="pageData?.pageSize"
-        [pageIndex]="pageData?.pageIndex"
-      ></ht-paginator>
+      <!-- Pagination -->
+      <div
+        class="pagination-controls"
+        *ngIf="this.pageable"
+        [style.position]="this.isTableFullPage ? 'fixed' : 'sticky'"
+      >
+        <ht-paginator
+          *htLetAsync="this.urlPageData$ as pageData"
+          (pageChange)="this.onPageChange($event)"
+          [pageSizeOptions]="this.pageSizeOptions"
+          [pageSize]="pageData?.pageSize"
+          [pageIndex]="pageData?.pageIndex"
+        ></ht-paginator>
+      </div>
     </div>
   `
 })
diff --git a/projects/observability/src/pages/explorer/explorer.component.scss b/projects/observability/src/pages/explorer/explorer.component.scss
index 41c06f9d4..e01cca1ac 100644
--- a/projects/observability/src/pages/explorer/explorer.component.scss
+++ b/projects/observability/src/pages/explorer/explorer.component.scss
@@ -16,7 +16,6 @@
 
   .visualization-panel {
     padding-top: 8px;
-
     .label {
       @include body-1-medium;
     }
@@ -31,7 +30,7 @@
 
   .results-panel {
     overflow: hidden;
-
+    flex: 1 1 auto;
     .label {
       @include body-1-medium;
     }