hide sapp iframe until it loads completely (#1020)

* hide sapp iframe until it loads completely

* review changes

* remove code

* moving type

* adding styled-components types

* fix TS error

* refactor iframe loading

package.json

@@ -214,6 +214,7 @@
     "@types/node": "14.0.12",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
+    "@types/styled-components": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "3.2.0",
     "@typescript-eslint/parser": "3.2.0",
     "autoprefixer": "9.8.0",

src/config/development.ts

@@ -5,6 +5,7 @@ const devConfig = {
   [SIGNATURES_VIA_METAMASK]: false,
   [RELAY_API_URL]: 'https://safe-relay.staging.gnosisdev.com/api/v1/',
   [SAFE_APPS_URL]: 'https://safe-apps.dev.gnosisdev.com/'  
+  //[SAFE_APPS_URL]: 'http://localhost:3002/'  
 }
 
 export default devConfig

src/routes/safe/components/Apps/AddAppForm.tsx

@@ -145,6 +145,8 @@ const AddAppForm = ({ appList, formId, closeModal, onAppAdded, setIsSubmitDisabl
     onAppAdded(appInfo)
   }
 
+  const onTextFieldChange = () => {}
+
   return (
     <GnoForm
       initialValues={{
@@ -169,7 +171,7 @@ const AddAppForm = ({ appList, formId, closeModal, onAppAdded, setIsSubmitDisabl
 
           <AppInfo>
             <Img alt="Token image" height={55} src={appInfo.iconUrl} />
-            <StyledTextFileAppName label="App name" readOnly value={appInfo.name} />
+            <StyledTextFileAppName label="App name" readOnly value={appInfo.name} onChange={onTextFieldChange} />
           </AppInfo>
 
           <FormSpy

src/routes/safe/components/Apps/index.tsx

@@ -38,6 +38,21 @@ const Centered = styled.div`
   justify-content: center;
   flex-direction: column;
 `
+
+const IframeWrapper = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`
+
+const IframeCoverLoading = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+`
 const operations = {
   SEND_TRANSACTIONS: 'SEND_TRANSACTIONS',
   ON_SAFE_INFO: 'ON_SAFE_INFO',
@@ -133,17 +148,14 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }) {
     const app = getSelectedApp()
 
     return (
-      <>
+      <IframeWrapper>
-        {appIsLoading && <Loader size="md" />}
+        {appIsLoading && (
-        <StyledIframe
+          <IframeCoverLoading>
-          frameBorder="0"
+            <Loader size="md" />
-          id={`iframe-${app.name}`}
+          </IframeCoverLoading>
-          ref={iframeRef}
+        )}
-          shouldDisplay={!appIsLoading}
+        <StyledIframe frameBorder="0" id={`iframe-${app.name}`} ref={iframeRef} src={app.url} title={app.name} />
-          src={app.url}
+      </IframeWrapper>
-          title={app.name}
-        />
-      </>
     )
   }
 

yarn.lock

@@ -2164,6 +2164,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz#79d7a78bad4219f4c03d6557a1c72d9ca6ba62d5"
@@ -2249,6 +2257,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native@*":
+  version "0.62.13"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.13.tgz#c688c5ae03e426f927f7e1fa1a59cd067f35d1c2"
+  integrity sha512-hs4/tSABhcJx+J8pZhVoXHrOQD89WFmbs8QiDLNSA9zNrD46pityAuBWuwk1aMjPk9I3vC5ewkJroVRHgRIfdg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -2276,6 +2291,16 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/styled-components@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
+
 "@types/testing-library__jest-dom@^5.0.2":
   version "5.9.1"
   resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.1.tgz#aba5ee062b7880f69c212ef769389f30752806e5"