Don't show view switcher until annotations received

Don't show the view switcher until the first batch of annotations has
been received. (This first batch will be all the annotations, unless
there are more than 200 annotations of the page.)

This is an attempt to reduce "popping" caused by the annotation switcher
suddenly changing a brief time after first render, when annotations are
loaded:

hypothesis/product-backlog#327 (comment)

src/sidebar/components/test/view-switcher-test.js

@@ -11,7 +11,17 @@ describe('viewSwitcher', function () {
   });
 
   beforeEach(function () {
-    var fakeAnnotationUI = {};
+    var fakeAnnotationUI = {
+      getState: sinon.stub().returns({
+        frames: [
+          {
+            // The view switcher only shows after the first batch of
+            // annotations have been fetched.
+            isAnnotationFetchComplete: true,
+          },
+        ],
+      }),
+    };
     var fakeFeatures = {
       flagEnabled: sinon.stub().returns(true),
     };

src/sidebar/components/view-switcher.js

@@ -19,6 +19,14 @@ module.exports = {
       return features.flagEnabled('orphans_tab');
     };
 
+    this.showViewSwitcher = function() {
+      var frame = annotationUI.getState().frames[0];
+      if (frame && frame.isAnnotationFetchComplete) {
+        return true;
+      }
+      return false;
+    };
+
     this.showAnnotationsUnavailableMessage = function () {
       return this.selectedTab === this.TAB_ANNOTATIONS &&
         this.totalAnnotations === 0 &&

src/sidebar/templates/view-switcher.html

@@ -1,4 +1,4 @@
-<div class="view-switcher">
+<div class="view-switcher" ng-if="vm.showViewSwitcher()">
   <button class="view-switcher__tab"
           ng-class="{'is-selected': vm.selectedTab === vm.TAB_ANNOTATIONS}"
           h-on-touch="vm.selectTab(vm.TAB_ANNOTATIONS)">