From fbff0a35e04ecfc7cda0c4dda373697ae0182fa5 Mon Sep 17 00:00:00 2001
From: nicolas <nicosampler@users.noreply.github.com>
Date: Tue, 13 Apr 2021 04:22:17 -0300
Subject: [PATCH] Prevent rendering safe-app outside its container while
 loading (#2143)

---
 src/routes/safe/components/Apps/components/AppFrame.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 02d41f29..7c810494 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -59,11 +59,12 @@ const StyledCard = styled(Card)`
   padding: 0;
 `
 
-const StyledIframe = styled.iframe`
+const StyledIframe = styled.iframe<{ isLoading: boolean }>`
   height: 100%;
   width: 100%;
   overflow: auto;
   box-sizing: border-box;
+  display: ${({ isLoading }) => (isLoading ? 'none' : 'block')};
 `
 
 const Breadcrumb = styled.div`
@@ -326,6 +327,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
         )}
 
         <StyledIframe
+          isLoading={appIsLoading}
           frameBorder="0"
           id={`iframe-${appUrl}`}
           ref={iframeRef}