Do not render profile modal contents when the modal is closed

src/annotator/components/ProfileModal.tsx

@@ -14,15 +14,11 @@ type ProfileModalProps = {
 export default function ProfileModal({ eventBus, config }: ProfileModalProps) {
   const [isHidden, setIsHidden] = useState(true);
   const emitterRef = useRef<Emitter | null>(null);
-  // Used only to track when was this modal first open, delaying the iframe to
-  // be loaded until strictly necessary.
-  const [hasOpened, setHasOpened] = useState(false);
 
   useEffect(() => {
     const emitter = eventBus.createEmitter();
     emitter.subscribe('openProfile', () => {
       setIsHidden(false);
-      setHasOpened(true);
     });
     emitterRef.current = emitter;
 
@@ -36,16 +32,13 @@ export default function ProfileModal({ eventBus, config }: ProfileModalProps) {
     emitterRef.current?.publish('closeProfile');
   };
 
-  if (!hasOpened) {
+  if (isHidden) {
     return null;
   }
 
   return (
     <div
-      className={classnames(
-        'fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50',
-        { hidden: isHidden }
-      )}
+      className="fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50"
       data-testid="profile-outer"
     >
       <div className="relative w-full h-full" data-testid="profile-inner">

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

@@ -34,7 +34,7 @@ describe('ProfileModal', () => {
     components.forEach(component => component.unmount());
   });
 
-  it('does not render anything before the modal has been opened at least once', () => {
+  it('does not render anything while the modal is closed', () => {
     const wrapper = createComponent();
     assert.equal(wrapper.find(outerSelector).length, 0);
   });
@@ -45,29 +45,25 @@ describe('ProfileModal', () => {
     emitter.publish('openProfile');
     wrapper.update();
 
-    const outer = wrapper.find(outerSelector);
-    assert.isFalse(outer.hasClass('hidden'));
+    assert.isTrue(wrapper.find(outerSelector).exists());
 
     const iframe = wrapper.find('iframe');
     assert.equal(iframe.prop('src'), profileURL);
   });
 
-  it('hides modal on closing', () => {
+  it("removes the modal's content on closing", () => {
     const wrapper = createComponent();
 
     emitter.publish('openProfile');
     wrapper.update();
 
-    let outer = wrapper.find(outerSelector);
-    assert.isFalse(outer.hasClass('hidden'));
+    assert.isTrue(wrapper.find(outerSelector).exists());
 
     act(() => {
       wrapper.find('IconButton').prop('onClick')();
     });
     wrapper.update();
 
-    outer = wrapper.find(outerSelector);
-
-    assert.isTrue(outer.hasClass('hidden'));
+    assert.isFalse(wrapper.find(outerSelector).exists());
   });
 });