New: Newznab/Torznab categories dropdown with indexer provided category names

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -10,6 +10,7 @@ import { icons, sizes, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Portal from 'Components/Portal';
 import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -250,6 +251,10 @@ class EnhancedSelectInput extends Component {
       this._addListener();
     }
 
+    if (!this.state.isOpen) {
+      this.props.onOpen();
+    }
+
     this.setState({ isOpen: !this.state.isOpen });
   }
 
@@ -295,6 +300,7 @@ class EnhancedSelectInput extends Component {
       value,
       values,
       isDisabled,
+      isFetching,
       hasError,
       hasWarning,
       valueOptions,
@@ -355,9 +361,21 @@ class EnhancedSelectInput extends Component {
                         styles.dropdownArrowContainer
                       }
                     >
-                      <Icon
-                        name={icons.CARET_DOWN}
-                      />
+
+                      {
+                        isFetching &&
+                          <LoadingIndicator
+                            className={styles.loading}
+                            size={20}
+                          />
+                      }
+
+                      {
+                        !isFetching &&
+                          <Icon
+                            name={icons.CARET_DOWN}
+                          />
+                      }
                     </div>
                   </Link>
                 </Measure>
@@ -483,12 +501,14 @@ EnhancedSelectInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   valueOptions: PropTypes.object.isRequired,
   selectedValueOptions: PropTypes.object.isRequired,
   selectedValueComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   optionComponent: PropTypes.elementType,
+  onOpen: PropTypes.func,
   onChange: PropTypes.func.isRequired
 };
 
@@ -496,6 +516,7 @@ EnhancedSelectInput.defaultProps = {
   className: styles.enhancedSelect,
   disabledClassName: styles.isDisabled,
   isDisabled: false,
+  isFetching: false,
   valueOptions: {},
   selectedValueOptions: {},
   selectedValueComponent: HintedSelectInputSelectedValue,