Render the `NotebookModal` only when `groupId` is defined

On Firefox, I have noticed that the notebook close button is briefly
displayed and then hidden. This delay is probably caused by time that it
takes to parse the CSS until it is applied. To avoid this 'blink' we
render the component only when the `groupId` is set.

src/annotator/components/NotebookModal.js

@@ -98,6 +98,10 @@ export default function NotebookModal({ eventBus, config }) {
     emitter.current.publish('closeNotebook');
   };
 
+  if (groupId === null) {
+    return null;
+  }
+
   return (
     <div
       className={classnames('NotebookModal__outer', { 'is-hidden': isHidden })}
@@ -111,9 +115,7 @@ export default function NotebookModal({ eventBus, config }) {
             variant="dark"
           />
         </div>
-        {groupId !== null && (
         <NotebookIframe key={iframeKey} config={config} groupId={groupId} />
-        )}
       </div>
     </div>
   );

src/annotator/components/test/NotebookModal-test.js

@@ -34,15 +34,14 @@ describe('NotebookModal', () => {
     const wrapper = createComponent();
     const outer = wrapper.find('.NotebookModal__outer');
 
-    assert.isTrue(outer.hasClass('is-hidden'));
-    assert.isFalse(wrapper.find('iframe').exists());
+    assert.isFalse(outer.exists());
   });
 
   it('shows modal on "openNotebook" event', () => {
     const wrapper = createComponent();
     let outer = wrapper.find('.NotebookModal__outer');
 
-    assert.isTrue(outer.hasClass('is-hidden'));
+    assert.isFalse(outer.exists());
     assert.isFalse(wrapper.find('iframe').exists());
 
     emitter.publish('openNotebook', 'myGroup');
@@ -124,6 +123,7 @@ describe('NotebookModal', () => {
       emitter.publish('openNotebook', 'myGroup');
     });
     assert.equal(document.body.style.overflow, 'hidden');
+    wrapper.update();
     act(() => {
       wrapper.find('IconButton').prop('onClick')();
     });