[Banner] Add loading state to primary action

[kyledurand]

WHY are these changes introduced?

Fixes #3967

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Banner, Button, Page} from '../src';

export function Playground() {
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    setTimeout(() => {
      setLoading(!loading);
    }, 1000);
  });

  return (
    <Page title="Playground">
      <Banner
        title="Some of your product variants are missing weights"
        status="warning"
        action={{content: 'Edit variant weights', loading}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
      <Button loading={loading}>Some text</Button>
      <Banner
        title="Some of your product variants are missing weights"
        status="critical"
        action={{
          content:
            'Edit variant weights with an extremely long title that wraps at small screens',
          loading,
        }}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
      <Banner
        title="Some of your product variants are missing weights"
        status="info"
        action={{content: 'Edit variant weights', loading}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
      <Banner
        title="Some of your product variants are missing weights"
        status="success"
        action={{content: 'Edit variant weights', loading}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
      <Banner
        title="Some of your product variants are missing weights"
        status="info"
        action={{content: 'Edit variant weights', loading}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
      <Banner
        title="Some of your product variants are missing weights"
        action={{content: 'Edit variant weights', loading}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying
          shipping labels in Shopify.
        </p>
      </Banner>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	142.2 KB (+0.06% 🔺)
esm	95.93 KB (+0.09% 🔺)
esnext	138.96 KB (+0.08% 🔺)
css	33.58 KB (+0.06% 🔺)

[sergical]

❤️