Change: powerFilter width and select loading state

src/web/components/form/select.jsx

@@ -16,7 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useCallback} from 'react';
+import {useCallback, useState, useEffect} from 'react';
 
 import {TextInput, Loader} from '@mantine/core';
 
@@ -35,7 +35,7 @@ const SelectValueValidator = (props, propName, componentName) => {
   const value = props[propName];
   const {items} = props;
 
-  if (!items || !items.length) {
+  if (!items?.length) {
     return;
   }
 
@@ -99,31 +99,27 @@ const Select = ({
     [name, onChange],
   );
 
-  if (isLoading) {
-    return (
-      <TextInput
-        styles={{root: {flexGrow: grow}}}
-        placeholder={_('Loading...')}
-        readOnly={true}
-        rightSection={<Loader size="xs" />}
-      />
-    );
-  }
+  const selectPlaceholder = isLoading ? _('Loading...') : placeholder;
+  const rightSection = isLoading && <Loader size="xs" />;
+  const selectableItems = isLoading ? [] : items;
+  const selectedValue = isLoading ? undefined : value;
+
   return (
     <OpenSightSelect
       {...props}
       styles={{root: {flexGrow: grow}}}
       dropdownPosition={dropdownPosition}
-      data={items}
+      data={selectableItems}
       disabled={disabled || !items?.length}
       error={isDefined(errorContent) && `${errorContent}`}
       searchable={searchable}
       label={label}
       title={toolTipTitle}
-      placeholder={placeholder}
+      placeholder={selectPlaceholder}
       name={name}
-      value={value}
+      value={selectedValue}
       onChange={handleChange}
+      rightSection={rightSection}
     />
   );
 };

src/web/components/powerfilter/powerfilter.jsx

@@ -56,6 +56,10 @@ const LeftDivider = styled(Divider)`
   margin-right: 5px;
 `;
 
+const PowerFilterTextField = styled(TextField)`
+  width: 30vw;
+`;
+
 const getUserFilterString = filter => {
   if (isDefined(filter) && isDefined(filter.toFilterCriteriaString)) {
     return filter.toFilterCriteriaString();
@@ -195,7 +199,7 @@ class PowerFilter extends React.Component {
               <Label>
                 <b>{_('Filter')}</b>
               </Label>
-              <TextField
+              <PowerFilterTextField
                 name="userFilterString"
                 size="53"
                 maxLength="1000"