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,37 +68,44 @@ function FilterStatusPanel({
   focusDisplayName,
   resultCount,
 }) {
+  const store = useStoreProxy();
   return (
     <div className="FilterStatus">
-      <div className="hyp-u-layout-row--align-center">
-        <div className="FilterStatus__text">
-          {resultCount > 0 && <span>Showing </span>}
-          <span className="filter-facet">
-            {resultCount > 0 ? resultCount : 'No'}{' '}
-            {resultCount === 1 ? entitySingular : entityPlural}
-          </span>
-          {filterQuery && (
-            <span>
-              {' '}
-              for{' '}
-              <span className="filter-facet--pre">&#39;{filterQuery}&#39;</span>
-            </span>
-          )}
-          {focusDisplayName && (
-            <span>
-              {' '}
-              by <span className="filter-facet">{focusDisplayName}</span>
-            </span>
-          )}
-          {additionalCount > 0 && (
-            <span className="filter-facet--muted">
-              {' '}
-              (and {additionalCount} more)
+      {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>}
+            <span className="filter-facet">
+              {resultCount > 0 ? resultCount : 'No'}{' '}
+              {resultCount === 1 ? entitySingular : entityPlural}
             </span>
-          )}
+            {filterQuery && (
+              <span>
+                {' '}
+                for{' '}
+                <span className="filter-facet--pre">{`'${filterQuery}'`}</span>
+              </span>
+            )}
+            {focusDisplayName && (
+              <span>
+                {' '}
+                by <span className="filter-facet">{focusDisplayName}</span>
+              </span>
+            )}
+            {additionalCount > 0 && (
+              <span className="filter-facet--muted">
+                {' '}
+                (and {additionalCount} more)
+              </span>
+            )}
+          </div>
+          <div>{actionButton}</div>
         </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();