Use `Spinner` component from `frontend-shared`

src/sidebar/components/NotebookResultCount.js

+import { Spinner } from '@hypothesis/frontend-shared';
+
 import useRootThread from './hooks/use-root-thread';
 import { countVisible } from '../helpers/thread';
 
-import Spinner from './Spinner';
-
 /**
  * @typedef NotebookResultCountProps
  * @prop {number} forcedVisibleCount
@@ -39,7 +39,7 @@ function NotebookResultCount({
 
   return (
     <div className="NotebookResultCount u-layout-row">
-      {isLoading && <Spinner />}
+      {isLoading && <Spinner size="small" />}
       {!isLoading && (
         <h2>
           {!hasResults && <strong>No results</strong>}

src/sidebar/components/SearchInput.js

-import { IconButton } from '@hypothesis/frontend-shared';
+import { IconButton, Spinner } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import { useRef, useState } from 'preact/hooks';
 
 import { useStoreProxy } from '../store/use-store';
 
-import Spinner from './Spinner';
-
 /**
  * @typedef SearchInputProps
  * @prop {boolean} [alwaysExpanded] -
@@ -87,7 +85,12 @@ export default function SearchInput({ alwaysExpanded, query, onSearch }) {
           />
         </div>
       )}
-      {isLoading && <Spinner />}
+
+      {isLoading && (
+        <div style="margin:0.5em 0">
+          <Spinner size="small" />
+        </div>
+      )}
     </form>
   );
 }

src/sidebar/components/ShareAnnotationsPanel.js

-import { IconButton, SvgIcon } from '@hypothesis/frontend-shared';
+import { IconButton, Spinner, SvgIcon } from '@hypothesis/frontend-shared';
 
 import { useStoreProxy } from '../store/use-store';
 import { pageSharingLink } from '../helpers/annotation-sharing';
@@ -8,7 +8,6 @@ import { notNull } from '../util/typing';
 
 import ShareLinks from './ShareLinks';
 import SidebarPanel from './SidebarPanel';
-import Spinner from './Spinner';
 
 /**
  * @typedef ShareAnnotationsPanelProps
@@ -51,7 +50,7 @@ function ShareAnnotationsPanel({ toastMessenger }) {
   return (
     <SidebarPanel title={panelTitle} panelName="shareGroupAnnotations">
       {!sharingReady && (
-        <div className="ShareAnnotationsPanel__spinner">
+        <div className="hyp-u-layout-row--center">
           <Spinner />
         </div>
       )}

src/sidebar/components/Spinner.js

-/**
- * Loading indicator.
- */
-export default function Spinner() {
-  // The `Spinner__container` div only exists to center the Spinner within
-  // the `<Spinner>` component element. Once consumers of this component
-  // have been converted to Preact, we should be able to remove this.
-  return (
-    <div className="Spinner__container">
-      {/* See `.Spinner` CSS definition for an explanation of the nested spans. */}
-      <span className="Spinner">
-        <span>
-          <span />
-        </span>
-      </span>
-    </div>
-  );
-}

src/sidebar/components/test/NotebookResultCount-test.js

@@ -131,7 +131,7 @@ describe('NotebookResultCount', () => {
 
       const wrapper = createComponent({ isLoading: true, resultCount: 2 });
 
-      assert.equal(wrapper.text(), '(2 annotations)');
+      assert.include(wrapper.text(), '(2 annotations)');
     });
   });
 

src/sidebar/components/test/Spinner-test.js

-import { mount } from 'enzyme';
-
-import Spinner from '../Spinner';
-
-import { checkAccessibility } from '../../../test-util/accessibility';
-
-describe('Spinner', () => {
-  const createSpinner = (props = {}) => mount(<Spinner {...props} />);
-
-  // A Spinner is a trivial component with no props. Just make sure it renders.
-  it('renders', () => {
-    const wrapper = createSpinner();
-    assert.isTrue(wrapper.exists('.Spinner'));
-  });
-
-  it(
-    'should pass a11y checks',
-    checkAccessibility({
-      content: () => createSpinner(),
-    })
-  );
-});

src/styles/sidebar/components/Spinner.scss

-// CSS Spinner modified from http://dabblet.com/gist/7615212
-// Works in modern browsers & IE10, IE9 gets stationary spinner.
-//
-// Examples
-//
-//   <!-- Three nested spans -->
-//   <span class="Spinner"><span><span></span></span></span>
-@use "sass:math";
-
-$container-width: 1em;
-$container-height: $container-width;
-$part-width: 0.1em;
-$part-height: 3 * $part-width;
-
-@keyframes spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-// Container which centers the spinner vertically.
-.Spinner__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-// The actual spinner itself.
-.Spinner {
-  position: relative;
-  display: inline-block;
-  width: $container-width;
-  height: $container-width;
-  text-indent: 999em;
-  overflow: hidden;
-  animation: spin 1.25s infinite steps(12);
-}
-
-.Spinner:before,
-.Spinner:after,
-.Spinner > span:before,
-.Spinner > span:after,
-.Spinner > span > span:before,
-.Spinner > span > span:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: math.div(($container-width - $part-width), 2);
-  width: $part-width;
-  height: $part-height;
-  border-radius: 0.1em;
-  background: #eee;
-  box-shadow: 0 ($container-height - $part-height) rgba(0, 0, 0, 0.15);
-  transform-origin: 50% math.div($container-height, 2);
-}
-
-.Spinner:before {
-  background: rgba(0, 0, 0, 0.65);
-}
-
-.Spinner:after {
-  transform: rotate(-30deg);
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.Spinner > span:before {
-  transform: rotate(-60deg);
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.Spinner > span:after {
-  transform: rotate(-90deg);
-  background: rgba(0, 0, 0, 0.4);
-}
-
-.Spinner > span > span:before {
-  transform: rotate(-120deg);
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.Spinner > span > span:after {
-  transform: rotate(-150deg);
-  background: rgba(0, 0, 0, 0.2);
-}

src/styles/sidebar/sidebar.scss

@@ -49,7 +49,6 @@
 @use './components/ShareAnnotationsPanel';
 @use './components/SearchInput';
 @use './components/ShareLinks';
-@use './components/Spinner';
 @use './components/TagEditor';
 @use './components/TagList';
 @use './components/Thread';
@@ -60,6 +59,9 @@
 @use './components/Tutorial';
 @use './components/VersionInfo';
 
+// Make the shared package utility styles available
+@use '@hypothesis/frontend-shared/styles/util' as hyp-u;
+
 // Top-level styles
 // ----------------