Add loading icon to TagPicker (#2118)

meedan · Sep 20, 2024 · a90796b · a90796b
1 parent 63b0438
commit a90796b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git 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
@@ -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}