From a90796bc0523ea38ed02f28052f5e4b8c8918659 Mon Sep 17 00:00:00 2001
From: Alexandre Amoedo Amorim <amoedoamorim@gmail.com>
Date: Fri, 20 Sep 2024 16:07:38 -0300
Subject: [PATCH] Add loading icon to TagPicker (#2118)

---
 src/app/components/cds/menus-lists-dialogs/TagPicker.js | 2 ++
 src/app/components/media/TeamTagsQueryRenderer.js       | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/app/components/cds/menus-lists-dialogs/TagPicker.js b/src/app/components/cds/menus-lists-dialogs/TagPicker.js
index 5c79f5967f..926755e9b5 100644
--- a/src/app/components/cds/menus-lists-dialogs/TagPicker.js
+++ b/src/app/components/cds/menus-lists-dialogs/TagPicker.js
@@ -14,6 +14,7 @@ const TagPicker = ({
   customCreateLabel,
   hasMore,
   loadMore,
+  loading,
   options: teamTags,
   readOnly,
   saving,
@@ -98,6 +99,7 @@ const TagPicker = ({
               }
               hasMore={hasMore}
               inputPlaceholder={placeholder}
+              loadingIcon={loading && <MediasLoading size="small" theme="white" variant="inline" />}
               notFoundLabel={
                 <FormattedMessage
                   defaultMessage="No tags found"
diff --git a/src/app/components/media/TeamTagsQueryRenderer.js b/src/app/components/media/TeamTagsQueryRenderer.js
index d1ac00ba9a..df1689ff46 100644
--- a/src/app/components/media/TeamTagsQueryRenderer.js
+++ b/src/app/components/media/TeamTagsQueryRenderer.js
@@ -52,6 +52,8 @@ const TeamTagsQueryRenderer = ({
       render={({ error, props }) => {
         if (error) return null;
 
+        const loading = Boolean(!error && !props);
+
         // TODO: This "merge selected tags with plainTagsTexts" logic is identical
         // to `SearchFieldTag` component. Evaluate reusing TeamTagsQueryRenderer there.
 
@@ -75,6 +77,7 @@ const TeamTagsQueryRenderer = ({
           <TagPicker
             hasMore={hasMore}
             loadMore={handleLoadMore}
+            loading={loading}
             options={plainTagsTexts.map(t => ({ label: t, value: t }))}
             readOnly={readOnly}
             searchTerm={keyword}