From 8923fe528774508972f6c3a6316d8c186c1ac516 Mon Sep 17 00:00:00 2001
From: Brian Fleming <brianfleming@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:08:57 -0400
Subject: [PATCH] update multiselect loader position (#2120)

* reposition multiselect loader animation so it always appears on top [CV2-2502]

* sort prop types for science [CV2-2502]
---
 .../cds/menus-lists-dialogs/TagPicker.js      |  2 +-
 src/app/components/layout/MultiSelector.js    | 11 ++++++----
 .../layout/MultiSelector.module.css           | 10 +++++++++
 .../components/search/MultiSelectFilter.js    | 21 +++++++++----------
 src/app/styles/css/mixins/variables.css       |  2 ++
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/components/cds/menus-lists-dialogs/TagPicker.js b/src/app/components/cds/menus-lists-dialogs/TagPicker.js
index 926755e9b5..e2db21f15e 100644
--- a/src/app/components/cds/menus-lists-dialogs/TagPicker.js
+++ b/src/app/components/cds/menus-lists-dialogs/TagPicker.js
@@ -99,7 +99,7 @@ const TagPicker = ({
               }
               hasMore={hasMore}
               inputPlaceholder={placeholder}
-              loadingIcon={loading && <MediasLoading size="small" theme="white" variant="inline" />}
+              loadingIcon={loading && <MediasLoading size="small" theme="grey" variant="inline" />}
               notFoundLabel={
                 <FormattedMessage
                   defaultMessage="No tags found"
diff --git a/src/app/components/layout/MultiSelector.js b/src/app/components/layout/MultiSelector.js
index 712cf877cb..7ef7befb7a 100644
--- a/src/app/components/layout/MultiSelector.js
+++ b/src/app/components/layout/MultiSelector.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import FormGroup from '@material-ui/core/FormGroup';
@@ -209,6 +208,11 @@ class MultiSelector extends React.Component {
             </div>
           }
         </div>
+        { this.props.loadingIcon &&
+          <div className={styles['multiselector-scroller-loader']}>
+            { this.props.loadingIcon }
+          </div>
+        }
         <div className={styles['multiselector-scroller']}>
           <InfiniteScroll
             hasMore={hasMore}
@@ -265,7 +269,6 @@ class MultiSelector extends React.Component {
                 </div>
               }
             </FormGroup>
-            { this.props.loadingIcon }
           </InfiniteScroll>
         </div>
         { this.props.children }
@@ -332,15 +335,15 @@ MultiSelector.propTypes = {
     color: PropTypes.string,
     parent: PropTypes.string,
   })).isRequired,
+  resetLabel: PropTypes.node,
   selected: PropTypes.arrayOf(PropTypes.string).isRequired,
   submitLabel: PropTypes.node.isRequired,
+  toggleAllLabel: PropTypes.node,
   onDismiss: PropTypes.func,
   onScrollBottom: PropTypes.func,
   onSearchChange: PropTypes.func,
   onSelectChange: PropTypes.func,
   onSubmit: PropTypes.func.isRequired,
-  toggleAllLabel: PropTypes.node,
-  resetLabel: PropTypes.node,
 };
 
 export default MultiSelector;
diff --git a/src/app/components/layout/MultiSelector.module.css b/src/app/components/layout/MultiSelector.module.css
index d85f1432ef..ce0791bd43 100644
--- a/src/app/components/layout/MultiSelector.module.css
+++ b/src/app/components/layout/MultiSelector.module.css
@@ -20,6 +20,16 @@
     }
   }
 
+  .multiselector-scroller-loader {
+    background-color: var(--overlayWhite);
+    height: 100%;
+    left: 0;
+    max-height: 320px;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
   .multiselector-scroller {
     background-color: var(--color-gray-96);
     height: 320px;
diff --git a/src/app/components/search/MultiSelectFilter.js b/src/app/components/search/MultiSelectFilter.js
index 71ba8ffc49..21fac0ab39 100644
--- a/src/app/components/search/MultiSelectFilter.js
+++ b/src/app/components/search/MultiSelectFilter.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -252,7 +251,7 @@ const CustomSelectDropdown = ({
               allowSearch={allowSearch}
               hasMore={hasMore}
               inputPlaceholder={inputPlaceholder || placeholder}
-              loadingIcon={loading && <MediasLoading size="small" theme="white" variant="inline" />}
+              loadingIcon={loading && <MediasLoading size="small" theme="grey" variant="inline" />}
               notFoundLabel={!loading && inputPlaceholder ? (
                 <FormattedMessage
                   defaultMessage="No results matching {keyword}."
@@ -300,31 +299,31 @@ MultiSelectFilter.defaultProps = {
 };
 
 MultiSelectFilter.propTypes = {
+  allowSearch: PropTypes.bool,
   error: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.string,
   ])),
-  allowSearch: PropTypes.bool,
   extraInputs: PropTypes.node,
+  icon: PropTypes.element.isRequired,
+  inputPlaceholder: PropTypes.string,
+  label: PropTypes.node.isRequired,
+  loading: PropTypes.bool,
+  oneOption: PropTypes.bool,
   options: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.string,
   ])).isRequired,
-  label: PropTypes.node.isRequired,
-  icon: PropTypes.element.isRequired,
-  loading: PropTypes.bool,
-  onChange: PropTypes.func,
-  onRemove: PropTypes.func,
+  readOnly: PropTypes.bool,
   selected: PropTypes.oneOfType([
     PropTypes.array,
     PropTypes.string,
   ]),
+  onChange: PropTypes.func,
+  onRemove: PropTypes.func,
   onScrollBottom: PropTypes.func,
   onToggleOperator: PropTypes.func,
-  readOnly: PropTypes.bool,
   onType: PropTypes.func,
-  inputPlaceholder: PropTypes.string,
-  oneOption: PropTypes.bool,
 };
 
 export default MultiSelectFilter;
diff --git a/src/app/styles/css/mixins/variables.css b/src/app/styles/css/mixins/variables.css
index 36e1b2bd7d..887bc9cbe6 100644
--- a/src/app/styles/css/mixins/variables.css
+++ b/src/app/styles/css/mixins/variables.css
@@ -115,6 +115,8 @@
 
   --grayShadow: rgb(0 0 0 / .15);
 
+  --overlayWhite: rgb(255 255 255 / .7);
+
   --overlayLight: rgb(34 34 34 / .7);
 
   /* https://facebookbrand.com/facebookapp/advertisers-and-partners/ */