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

[jesstelford]

Related to https://github.com/Shopify/polaris-internal/issues/999

Before

This PR

Filters mode
Search mode, no input
Search mode, with input

[mrcthms]

@jesstelford I can offer some context around this – we didn't want to have the input flicker lengths when the table is in a loading state, but rather have a consistent length. I'll double check with @ouellettejordan whether this is something we want to keep, as I know this was an intentional ask when we initially built the component.

[chloerice]

What if the spinner replaced the input clear button when loading is true, or rendered to the left of the clear button?

replacing	left of
demo-replacing-clear-button-on-load.mp4	demo-spinner-left-of-clear-button.mp4

[jesstelford]

Great input @mrcthms & @chloerice!

I've moved the spinner to be next to the close button, what do you think?

Filters mode
Search mode, no input
Search mode, with input

[jesstelford]

🤔 The CI failures don't make sense me - I don't get that locally, and "2" should be a valid gap type... Any ideas? Rebase onto next fixed it 👍

[chloerice]

Thanks for tackling this Jess!! 🙌🏽

[chloerice]

Suggested change

	/** Show a loading spinner to the right of the input */
	/** Show a loading spinner to the right of the input value */

[chloerice]

Suggested change

	[IndexFilters] Loading spinner moved to be a suffix within the search box.
	Moved the `Filters` loading spinner to the suffix of the query filter

[chloerice]

❤️

[chloerice]

Let's move the markup for each of the suffix items into variables so there aren't conditionals in the return.

const loadingMarkup = loading
  ? (
    <div className={styles.Spinner}>
      <Spinner size="small" />
    </div>
  ) : null;

const clearButtonMarkup = value !== ''
  ? (
    <UnstyledButton
      onClick={() => handleClear()}
      disabled={disabled}
      className={classNames(
        styles.ClearButton,
        focused && styles['ClearButton-focused'],
      )}
    >
      <Text as="span" visuallyHidden>
        {i18n.translate('Polaris.Common.clear')}
      </Text>
      <Icon source={CircleCancelMinor} tone="subdued" />
    </UnstyledButton>
) : null

const suffixMarkup = loading || value !== '' 
  ? (
    <div className={styles.Suffix}>
      <InlineStack gap="200">
        {loadingMarkup}
        {clearButtonMarkup}
      </InlineStack>
    </div>
  ) : null;
  
  
  ....
  ....
  

{suffixMarkup}

[annaShop]

hi @chloerice , could you please update on when this PR will be merged?
we have a high priority bug https://github.com/Shopify/temp-project-mover-syfiawoo-20250331132715/issues/334 that should be fixed by this merge.
thnx!

[chloerice]

hi @chloerice , could you please update on when this PR will be merged? we have a high priority bug Shopify/temp-project-mover-syfiawoo-20250331132715#334 that should be fixed by this merge. thnx!

Hey @annaShop 👋🏽 The team was away Bursting last week. This will get merged in the next couple days but won't be updated in Shopify/web until the v12 upgrade ships (which will likely be early next week).