Show spinner in filter interface when loading

The only typical time that the filter interface is visible when loading
is when loading groups for a focused student-user in grading mode.
Other filtering happens client-side and doesn't involve loading.

But when we ARE loading, don't show an inaccurate count (because we
don't have all the results yet), show a spinner instead.

src/sidebar/components/FilterStatus.js

-import { LabeledButton } from '@hypothesis/frontend-shared';
+import { LabeledButton, Spinner } from '@hypothesis/frontend-shared';
 
 import { useMemo } from 'preact/hooks';
 
@@ -68,8 +68,14 @@ function FilterStatusPanel({
   focusDisplayName,
   resultCount,
 }) {
+  const store = useStoreProxy();
   return (
     <div className="FilterStatus">
+      {store.isLoading() ? (
+        <div className="hyp-u-layout-row--center">
+          <Spinner />
+        </div>
+      ) : (
         <div className="hyp-u-layout-row--align-center">
           <div className="FilterStatus__text">
             {resultCount > 0 && <span>Showing </span>}
@@ -81,7 +87,7 @@ function FilterStatusPanel({
               <span>
                 {' '}
                 for{' '}
-              <span className="filter-facet--pre">&#39;{filterQuery}&#39;</span>
+                <span className="filter-facet--pre">{`'${filterQuery}'`}</span>
               </span>
             )}
             {focusDisplayName && (
@@ -99,6 +105,7 @@ function FilterStatusPanel({
           </div>
           <div>{actionButton}</div>
         </div>
+      )}
     </div>
   );
 }

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

@@ -44,6 +44,7 @@ describe('FilterStatus', () => {
       filterState: sinon.stub().returns(getFilterState()),
       focusState: sinon.stub().returns(getFocusState()),
       forcedVisibleThreads: sinon.stub().returns([]),
+      isLoading: sinon.stub().returns(false),
       selectedAnnotations: sinon.stub().returns([]),
       toggleFocusMode: sinon.stub(),
     };
@@ -80,6 +81,16 @@ describe('FilterStatus', () => {
     });
   }
 
+  context('Loading', () => {
+    it('shows a loading spinner', () => {
+      fakeStore.filterQuery.returns('foobar');
+      fakeStore.isLoading.returns(true);
+      const wrapper = createComponent();
+
+      assert.isTrue(wrapper.find('Spinner').exists());
+    });
+  });
+
   context('(State 1): no search filters active', () => {
     it('should return null if filter state indicates no active filters', () => {
       const wrapper = createComponent();