From 9500887ee6807282d58010d780fe07ede8b73eb4 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Thu, 6 Jan 2022 22:36:28 +0100
Subject: [PATCH] Add condition to modal

This way we prevent unwanted data loading, invisible updates
and visual artifacts when the modal isn't visible.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 src/components/common/modals/common-modal.tsx | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/common/modals/common-modal.tsx b/src/components/common/modals/common-modal.tsx
index 1db3067eb..bacd0559d 100644
--- a/src/components/common/modals/common-modal.tsx
+++ b/src/components/common/modals/common-modal.tsx
@@ -48,23 +48,25 @@ export const CommonModal: React.FC<CommonModalProps> = ({
   }, [title, titleIsI18nKey])
 
   return (
-    <Modal
-      {...cypressId(props)}
-      show={show}
-      onHide={onHide}
-      animation={true}
-      dialogClassName={`text-dark ${additionalClasses ?? ''}`}
-      size={modalSize}>
-      <Modal.Header closeButton={!!showCloseButton}>
-        <Modal.Title>
-          <ShowIf condition={!!titleIcon}>
-            <ForkAwesomeIcon icon={titleIcon as IconName} />
-            &nbsp;
-          </ShowIf>
-          {titleElement}
-        </Modal.Title>
-      </Modal.Header>
-      {children}
-    </Modal>
+    <ShowIf condition={show}>
+      <Modal
+        {...cypressId(props)}
+        show={show}
+        onHide={onHide}
+        animation={true}
+        dialogClassName={`text-dark ${additionalClasses ?? ''}`}
+        size={modalSize}>
+        <Modal.Header closeButton={!!showCloseButton}>
+          <Modal.Title>
+            <ShowIf condition={!!titleIcon}>
+              <ForkAwesomeIcon icon={titleIcon as IconName} />
+              &nbsp;
+            </ShowIf>
+            {titleElement}
+          </Modal.Title>
+        </Modal.Header>
+        {children}
+      </Modal>
+    </ShowIf>
   )
 }