From 74d3d3cf4a4435eafed704183ab351ccda5052c9 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Thu, 20 Apr 2023 17:22:09 +0200
Subject: [PATCH] Log Context: Improve loading indicator (#66979)

* remove loadingplaceholder

* lint
---
 .../datasource/loki/components/LokiContextUi.tsx      | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
index 61a32acf93e..f91e3417e22 100644
--- a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
@@ -4,7 +4,7 @@ import { useAsync } from 'react-use';
 
 import { GrafanaTheme2, LogRowModel, SelectableValue } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { Collapse, Icon, Label, LoadingPlaceholder, MultiSelect, Tag, Tooltip, useStyles2 } from '@grafana/ui';
+import { Collapse, Icon, Label, MultiSelect, Tag, Tooltip, useStyles2 } from '@grafana/ui';
 import store from 'app/core/store';
 
 import { RawQuery } from '../../prometheus/querybuilder/shared/RawQuery';
@@ -34,12 +34,6 @@ function getStyles(theme: GrafanaTheme2) {
       flex: 1;
       gap: ${theme.spacing(0.5)};
     `,
-    loadingPlaceholder: css`
-      margin-bottom: 0px;
-      float: right;
-      display: inline;
-      margin-left: auto;
-    `,
     textWrapper: css`
       display: flex;
       align-items: center;
@@ -167,7 +161,6 @@ export function LokiContextUi(props: LokiContextUiProps) {
 
   return (
     <div className={styles.wrapper}>
-      <LoadingPlaceholder text="" className={`${styles.loadingPlaceholder} ${loading ? '' : styles.hidden}`} />
       <Collapse
         collapsible={true}
         isOpen={isOpen}
@@ -208,6 +201,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
             Widen the search
           </Label>
           <MultiSelect
+            isLoading={loading}
             options={realLabels.map(contextFilterToSelectFilter)}
             value={realLabelsEnabled.map(contextFilterToSelectFilter)}
             closeMenuOnSelect={true}
@@ -248,6 +242,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
                 Refine the search
               </Label>
               <MultiSelect
+                isLoading={loading}
                 options={parsedLabels.map(contextFilterToSelectFilter)}
                 value={parsedLabelsEnabled.map(contextFilterToSelectFilter)}
                 closeMenuOnSelect={true}