[IndexFilters] Loading spinner moved to be a suffix within the search box.

.changeset/sixty-fishes-grin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[IndexFilters] Loading spinner moved to be a suffix within the search box.

polaris-react/src/components/Filters/Filters.scss

@@ -29,15 +29,6 @@
   flex: 1;
 }
 
-.Spinner {
-  width: var(--p-space-500);
-  transform: translateX(var(--p-space-100));
-
-  svg {
-    display: block;
-  }
-}
-
 .FiltersWrapper {
   border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   height: 53px;

polaris-react/src/components/Filters/Filters.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useRef, useEffect, useMemo} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import type {ReactNode} from 'react';
 import {PlusMinor} from '@shopify/polaris-icons';
 import type {TransitionStatus} from 'react-transition-group';
@@ -18,7 +18,6 @@ import type {
 import {InlineStack} from '../InlineStack';
 import type {BoxProps} from '../Box';
 import {Box} from '../Box';
-import {Spinner} from '../Spinner';
 import {Button} from '../Button';
 
 import {FilterPill, SearchField} from './components';
@@ -280,17 +279,6 @@ export function Filters({
 
   const shouldShowAddButton = filters.some((filter) => !filter.pinned);
 
-  const additionalContent = useMemo(() => {
-    return (
-      <>
-        <div className={styles.Spinner}>
-          {loading ? <Spinner size="small" /> : null}
-        </div>
-        {children}
-      </>
-    );
-  }, [loading, children]);
-
   const containerSpacing: {
     paddingBlockStart: BoxProps['paddingBlockStart'];
     paddingBlockEnd: BoxProps['paddingBlockEnd'];
@@ -335,9 +323,10 @@ export function Filters({
               focused={focused}
               disabled={disabled || disableQueryField}
               borderlessQueryField={borderlessQueryField}
+              loading={loading}
             />
           </div>
-          {additionalContent}
+          {children}
         </InlineStack>
       </Box>
     </div>
@@ -454,7 +443,7 @@ export function Filters({
                 md: '300',
               }}
             >
-              {additionalContent}
+              {children}
             </InlineStack>
           </Box>
         ) : null}

polaris-react/src/components/Filters/components/SearchField/SearchField.scss

@@ -1,6 +1,8 @@
 @import '../../../../styles/common';
 
 .SearchField {
+  // stylelint-disable-next-line -- Polaris component custom properties
+  --pc-indexfilter-search-padding-inline: var(--p-space-150);
   position: relative;
   display: flex;
   padding-block: var(--p-space-025);
@@ -19,7 +21,8 @@
   border: var(--p-border-width-025) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-100);
   border-color: var(--p-color-input-border);
-  padding-inline: var(--p-space-150);
+  // stylelint-disable-next-line -- Polaris component custom properties
+  padding-inline: var(--pc-indexfilter-search-padding-inline);
   width: 100%;
 
   &:hover {
@@ -54,19 +57,32 @@
   outline-offset: var(--p-space-025);
 }
 
-.ClearButton {
+.Suffix {
   position: absolute;
   top: 50%;
-  right: 0;
+  // stylelint-disable-next-line -- Polaris component custom properties
+  right: var(--pc-indexfilter-search-padding-inline);
+  transform: translateY(-50%);
+}
+
+.ClearButton {
   background: none;
   border: none;
-  transform: translateY(-50%);
   opacity: 0;
   transition: opacity var(--p-motion-duration-150) var(--p-motion-ease-in-out);
   cursor: pointer;
+  padding: 0;
 }
 
 .ClearButton-focused {
   opacity: 1;
   pointer-events: auto;
 }
+
+.Spinner {
+  width: var(--p-space-500);
+
+  svg {
+    display: block;
+  }
+}

polaris-react/src/components/Filters/components/SearchField/SearchField.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useRef, useId} from 'react';
 import {CircleCancelMinor} from '@shopify/polaris-icons';
 
+import {InlineStack} from '../../../InlineStack';
+import {Spinner} from '../../../Spinner';
 import {Text} from '../../../Text';
 import {classNames} from '../../../../utilities/css';
 import {Icon} from '../../../Icon';
@@ -19,6 +21,8 @@ export interface SearchFieldProps {
   placeholder?: string;
   disabled?: boolean;
   borderlessQueryField?: boolean;
+  /** Show a loading spinner to the right of the input */
+  loading?: boolean;
 }
 
 export function SearchField({
@@ -31,6 +35,7 @@ export function SearchField({
   placeholder,
   disabled,
   borderlessQueryField,
+  loading,
 }: SearchFieldProps) {
   const i18n = useI18n();
   const id = useId();
@@ -72,21 +77,32 @@ export function SearchField({
         placeholder={placeholder}
         disabled={disabled}
       />
-      {value !== '' && (
-        <UnstyledButton
-          className={classNames(
-            styles.ClearButton,
-            focused && styles['ClearButton-focused'],
-          )}
-          onClick={() => handleClear()}
-          disabled={disabled}
-        >
-          <Text as="span" visuallyHidden>
-            {i18n.translate('Polaris.Common.clear')}
-          </Text>
-          <Icon source={CircleCancelMinor} tone="subdued" />
-        </UnstyledButton>
-      )}
+      {loading || value !== '' ? (
+        <div className={styles.Suffix}>
+          <InlineStack gap="200">
+            {loading ? (
+              <div className={styles.Spinner}>
+                <Spinner size="small" />
+              </div>
+            ) : null}
+            {value !== '' ? (
+              <UnstyledButton
+                className={classNames(
+                  styles.ClearButton,
+                  focused && styles['ClearButton-focused'],
+                )}
+                onClick={() => handleClear()}
+                disabled={disabled}
+              >
+                <Text as="span" visuallyHidden>
+                  {i18n.translate('Polaris.Common.clear')}
+                </Text>
+                <Icon source={CircleCancelMinor} tone="subdued" />
+              </UnstyledButton>
+            ) : null}
+          </InlineStack>
+        </div>
+      ) : null}
     </div>
   );
 }

polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import type {TabProps} from '@shopify/polaris';
 import {
@@ -224,6 +224,23 @@ function BasicExample(
   const [moneySpent, setMoneySpent] = useState(null);
   const [taggedWith, setTaggedWith] = useState('');
   const [queryValue, setQueryValue] = useState('');
+  const [uncontrolledLoading, setLoading] = useState<boolean>(false);
+  const loadingIsControlled = typeof props.loading !== 'undefined';
+  const loading = loadingIsControlled ? props.loading : uncontrolledLoading;
+
+  // Psuedo-loading state transitions
+  useEffect(() => {
+    if (loadingIsControlled) {
+      return;
+    }
+    if (queryValue !== '') {
+      setLoading(true);
+    }
+    const timeoutId = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+    return () => clearTimeout(timeoutId);
+  }, [loadingIsControlled, queryValue]);
 
   const handleAccountStatusChange = useCallback(
     (value) => setAccountStatus(value),
@@ -344,7 +361,7 @@ function BasicExample(
     <Card padding="0">
       <IndexFilters
         {...props}
-        loading={queryValue !== ''}
+        loading={loading}
         sortOptions={sortOptions}
         sortSelected={sortSelected}
         queryValue={queryValue}
@@ -407,6 +424,10 @@ export function WithoutKeyboardShortcuts() {
   return <BasicExample disableKeyboardShortcuts />;
 }
 
+export function WithLoading() {
+  return <BasicExample loading />;
+}
+
 export function WithPinnedFilters() {
   const sleep = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));