Fix <SearchStatusBar> flicker (#2271)

Don’t hide the component when `store.isLoading()` is true. This only causes a re-render of that component and momentarily removes it from the DOM. Its not actually invalid to show the filter buttons while loading because the filter is still being applied.

src/sidebar/components/sidebar-content.js

@@ -76,7 +76,6 @@ function SidebarContent({
     hasDirectLinkedAnnotationError || hasDirectLinkedGroupError;
 
   const showTabs = !hasContentError && !hasAppliedFilter;
-  const showSearchStatus = !hasContentError && !isLoading;
 
   // Show a CTA to log in if successfully viewing a direct-linked annotation
   // and not logged in
@@ -139,7 +138,7 @@ function SidebarContent({
         <SidebarContentError errorType="group" onLoginRequest={onLogin} />
       )}
       {showTabs && <SelectionTabs isLoading={isLoading} />}
-      {showSearchStatus && <SearchStatusBar />}
+      {!hasContentError && <SearchStatusBar />}
       <ThreadList thread={rootThread} />
       {showLoggedOutMessage && <LoggedOutMessage onLogin={onLogin} />}
     </div>

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

@@ -169,9 +169,13 @@ describe('SidebarContent', () => {
 
       it('does not render tabs', () => {
         const wrapper = createComponent();
-
         assert.isFalse(wrapper.find('SelectionTabs').exists());
       });
+
+      it('does not render search status', () => {
+        const wrapper = createComponent();
+        assert.isFalse(wrapper.find('SearchStatusBar').exists());
+      });
     });
   });
 
@@ -194,9 +198,13 @@ describe('SidebarContent', () => {
 
     it('does not render tabs', () => {
       const wrapper = createComponent();
-
       assert.isFalse(wrapper.find('SelectionTabs').exists());
     });
+
+    it('does not render search status', () => {
+      const wrapper = createComponent();
+      assert.isFalse(wrapper.find('SearchStatusBar').exists());
+    });
   });
 
   describe('streamer', () => {
@@ -224,23 +232,11 @@ describe('SidebarContent', () => {
     assert.isTrue(wrapper.find('FocusedModeHeader').exists());
   });
 
-  it('renders search status', () => {
-    fakeStore.hasFetchedAnnotations.returns(true);
-    fakeStore.isLoading.returns(false);
-
+  it('renders the search status', () => {
     const wrapper = createComponent();
-
     assert.isTrue(wrapper.find('SearchStatusBar').exists());
   });
 
-  it('does not render search status if annotations are loading', () => {
-    fakeStore.isLoading.returns(true);
-
-    const wrapper = createComponent();
-
-    assert.isFalse(wrapper.find('SearchStatusBar').exists());
-  });
-
   describe('selection tabs', () => {
     it('renders tabs', () => {
       const wrapper = createComponent();