Add default `searchingIndicator` prop for searchbox component

[kellyi]

Overview

Currently the search box will render a searchingIndicator React node passed in as an optional prop from Unity Bar's host application to be rendered when the isSearching prop is set to be true.

In cases when isSearching is true but no searchingIndicator prop has been passed in, the current fallback is to keep displaying the magnifying glass icon.

However, it'd be preferable to give the search box a defaultProp to render in cases when searchingIndicator is null. We can use a cleaned up FA SVG to match the other icons. This would make it so other apps don't have to pass in a searching indicator at all and still enable the search box to get into a searching state.

Describe the solution you'd like

• add a cleaned up FA spinner SVG. Check with @lederer about what is the correct icon to use and what is the correct cleaning to do on the SVG file.

• include the spinner icon in the SVGIcons component with an ID like pwdub-icon-spinner

• use something like this as the defaultProp for the searchingIndicator in the UnityBar:

<svg className="icon" aria-hidden="true">
    <use xlinkHref="#pwdub-icon-spinner" />
</svg>

[lederer]

Try this SVG code. It's a cleaned up version of the circle-o-notch icon, which is a bit more modern than the alternatives in FA 4.7.

<symbol id="pwdub-icon-spinner" viewBox="0 0 1792 1792">
  <path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5T32 896q0-213 97-398.5T394 192 768 41v228q-221 45-366.5 221T256 896q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406T1024 269V41q206 31 374 151t265 305.5 97 398.5z"/>
</symbol>

---

Also note that the icon will need to be rotated, preferably via CSS. Something like this should work:

@keyframes rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

.spinner {
  animation: rotate 1s linear infinite;
}