From 1a7b0d0ab8944b5ceabb78e13d38a2532113bf35 Mon Sep 17 00:00:00 2001
From: pavelpashkovsky <pavelpashkovsky@gmail.com>
Date: Thu, 1 Dec 2022 17:26:22 +0300
Subject: [PATCH] fix: tags loading

---
 .../javascript/components/TagsBar.module.css  |  4 ---
 .../javascript/components/TagsBar.module.scss |  6 ++++
 webapp/javascript/components/TagsBar.tsx      | 28 +++++++++++++------
 3 files changed, 26 insertions(+), 12 deletions(-)
 delete mode 100644 webapp/javascript/components/TagsBar.module.css
 create mode 100644 webapp/javascript/components/TagsBar.module.scss

diff --git a/webapp/javascript/components/TagsBar.module.css b/webapp/javascript/components/TagsBar.module.css
deleted file mode 100644
index fb25e6803f..0000000000
--- a/webapp/javascript/components/TagsBar.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.executeButton {
-  flex-grow: 1;
-  color: var(--ps-immutable-white);
-}
diff --git a/webapp/javascript/components/TagsBar.module.scss b/webapp/javascript/components/TagsBar.module.scss
new file mode 100644
index 0000000000..ebb831ba55
--- /dev/null
+++ b/webapp/javascript/components/TagsBar.module.scss
@@ -0,0 +1,6 @@
+.loadingWrapper {
+  display: flex;
+  height: 80px;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/webapp/javascript/components/TagsBar.tsx b/webapp/javascript/components/TagsBar.tsx
index 29a9565e76..3f023822a9 100644
--- a/webapp/javascript/components/TagsBar.tsx
+++ b/webapp/javascript/components/TagsBar.tsx
@@ -11,7 +11,8 @@ import { Query, brandQuery } from '@webapp/models/query';
 import Input from '@webapp/ui/Input';
 import { appendLabelToQuery } from '@webapp/util/query';
 import QueryInput from '@webapp/components/QueryInput/QueryInput';
-
+import LoadingSpinner from '@webapp/ui/LoadingSpinner';
+import styles from './TagsBar.module.scss';
 interface TagsBarProps {
   /** callback for when a label is selected */
   onSelectedLabel: (label: string, query: Query) => void;
@@ -185,17 +186,28 @@ function LabelsSubmenu({
   };
 
   const Items = Object.entries(tags).map(([tag, tagValues]) => {
+    const onChange = (open: boolean) => {
+      if (open && tagValues.type !== 'loaded') {
+        onSelectedLabel(tag);
+      }
+    };
+
+    const values =
+      tagValues.type === 'loaded' ? (
+        <MenuGroup takeOverflow>{GetTagValues(tag, tagValues)}</MenuGroup>
+      ) : (
+        <div className={styles.loadingWrapper}>
+          <LoadingSpinner />
+        </div>
+      );
+
     return (
       <SubMenu
         key={tag}
         overflow="auto"
         position="initial"
-        onChange={(open) => {
-          // we are opening the menu for the first time
-          if (open && tagValues.type !== 'loaded') {
-            onSelectedLabel(tag);
-          }
-        }}
+        onChange={() => onChange(true)}
+        onMenuChange={({ open }) => onChange(open)}
         label={() => (
           <span
             className="tag-content"
@@ -207,7 +219,7 @@ function LabelsSubmenu({
         )}
       >
         {GetFilter(tag)}
-        <MenuGroup takeOverflow>{GetTagValues(tag, tagValues)}</MenuGroup>
+        {values}
       </SubMenu>
     );
   });