From e5e86287fa47d0e336d3017a4df659ef0ee50c5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joan=20Leo=CC=81n?= <joan.leon@gmail.com>
Date: Thu, 16 Dec 2021 16:05:38 +0100
Subject: [PATCH 1/2] feat(components/script/loader): add isDefer prop to load
 scripts deferred

---
 components/script/loader/demo/playground | 11 +++++++++++
 components/script/loader/src/helper.js   | 19 +++++++++++++++----
 components/script/loader/src/index.js    |  8 +++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/components/script/loader/demo/playground b/components/script/loader/demo/playground
index 5b20791ac..11f5b9eea 100644
--- a/components/script/loader/demo/playground
+++ b/components/script/loader/demo/playground
@@ -2,9 +2,20 @@
 const src = 'https://cdns.gigya.com/JS/gigya.js?apikey=3_mguHvyO40mAI8ozGJLSFiYAMicGHRYkOaz56NX5uvYlRjrI5qHdfBxw25Q-SYYz8' // This API key is a demo key, please don't use it in your site :D
 const verifier = () => window && window.gigya
 const render = () => 'Gigya is loaded! You can now interact with the sdk functions!!'
+const renderDefer = () => 'Gigya is loaded with defer attribute! You can now interact with the sdk functions!!'
 
 return (
   <div>
+    <h3>Demo</h3>
+    <p>
+      <ScriptLoader
+        src={src}
+        verifier={verifier}
+        isDefer
+        render={renderDefer}
+      />
+    </p>
+
     <p>
       <ScriptLoader
         src={src}
diff --git a/components/script/loader/src/helper.js b/components/script/loader/src/helper.js
index fdc5aa627..e0a90df24 100644
--- a/components/script/loader/src/helper.js
+++ b/components/script/loader/src/helper.js
@@ -6,11 +6,19 @@ const scriptPromises = []
  * @param  {string} params.src
  * @param  {function} params.verifier
  * @param  {boolean} params.isAsync
+ * @param  {boolean} params.isDefer
  * @param  {number} params.detectionDelay
  * @param  {string} params.stylesheet
  * @return {Promise}
  */
-const loadScript = ({src, verifier, isAsync, detectionDelay, stylesheet}) => {
+const loadScript = ({
+  src,
+  verifier,
+  isAsync,
+  isDefer,
+  detectionDelay,
+  stylesheet
+}) => {
   scriptPromises[src] =
     scriptPromises[src] ||
     new Promise((resolve, reject) => {
@@ -21,7 +29,7 @@ const loadScript = ({src, verifier, isAsync, detectionDelay, stylesheet}) => {
         return
       }
 
-      injectScript({src, isAsync})
+      injectScript({src, isAsync, isDefer})
       stylesheet && injectStyles(stylesheet)
       waitUntil(verifier, resolve, reject, detectionDelay)
     })
@@ -34,13 +42,16 @@ const loadScript = ({src, verifier, isAsync, detectionDelay, stylesheet}) => {
  * @param  {object} params
  * @param  {string} params.src
  * @param  {boolean} params.isAsync
+ * @param  {boolean} params.isDefer
  * @return {void}
  */
-const injectScript = ({src, isAsync}) => {
+const injectScript = ({src, isAsync, isDefer}) => {
   const script = document.createElement('script')
 
   script.src = src
-  script.async = isAsync
+  script.defer = isDefer
+
+  if (!isDefer) script.async = isAsync
 
   document.body.appendChild(script)
 }
diff --git a/components/script/loader/src/index.js b/components/script/loader/src/index.js
index 7a6642ebc..140ea58cb 100644
--- a/components/script/loader/src/index.js
+++ b/components/script/loader/src/index.js
@@ -7,6 +7,7 @@ const ScriptLoader = ({
   src,
   verifier,
   isAsync = true,
+  isDefer = false,
   detectionDelay = 5000,
   onTimeout = () => {},
   stylesheet,
@@ -17,7 +18,7 @@ const ScriptLoader = ({
   const [timeout, seTimeout] = useState(false)
 
   const initLoad = () => {
-    loadScript({src, verifier, isAsync, detectionDelay, stylesheet})
+    loadScript({src, verifier, isAsync, isDefer, detectionDelay, stylesheet})
       .then(() => setReadyToRender(true))
       .catch(() => seTimeout(true))
   }
@@ -59,6 +60,11 @@ ScriptLoader.propTypes = {
    * If the script should be marked as async or not
    */
   isAsync: PropTypes.bool,
+  /**
+   * If the script should be marker as defer or not.
+   * If isDefer is true, isAsync will be false
+   */
+  isDefer: PropTypes.bool,
   /**
    * Detection delay time (in miliseconds)
    */

From 30c2539ecfb71193f73c33ac16989adf26c528cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joan=20Leo=CC=81n?= <joan.leon@gmail.com>
Date: Thu, 16 Dec 2021 16:25:00 +0100
Subject: [PATCH 2/2] docs(components/script/loader): fix typo

---
 components/script/loader/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/script/loader/src/index.js b/components/script/loader/src/index.js
index 140ea58cb..63af18c4f 100644
--- a/components/script/loader/src/index.js
+++ b/components/script/loader/src/index.js
@@ -61,7 +61,7 @@ ScriptLoader.propTypes = {
    */
   isAsync: PropTypes.bool,
   /**
-   * If the script should be marker as defer or not.
+   * If the script should be marked as defer or not.
    * If isDefer is true, isAsync will be false
    */
   isDefer: PropTypes.bool,