From 5f5c96e242cb5e85306d9c51cc04e7eb109af3fc Mon Sep 17 00:00:00 2001
From: filip1 <filipnohe@gmail.com>
Date: Mon, 24 Aug 2020 13:07:57 +0200
Subject: [PATCH] Fix render-blocking widget script

The widget embed code prevents the embedding page from rendering while the widget script is loading. Instead, the script can be loaded asyncronously while showing a loading animation.
---
 apps/frontend/modules/d_widget/templates/_view.php | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/modules/d_widget/templates/_view.php b/apps/frontend/modules/d_widget/templates/_view.php
index b7e76e8..d0f665d 100644
--- a/apps/frontend/modules/d_widget/templates/_view.php
+++ b/apps/frontend/modules/d_widget/templates/_view.php
@@ -8,8 +8,11 @@
                 </button>
             </div>
             <div class="modal-body">
-                <p><b>HTML-Code:</b><code> &lt;script type="text/javascript"
-                    src="<?php echo url_for('api_js_widget', array('id' => $id), true) ?>"&gt;&lt;/script&gt;</code></p>
+                <p><b>HTML-Code:</b><code> &lt;div id="policat_<?php echo $id ?>"&gt;&lt;div class="policat-loading"&gt;&lt;/div&gt;&lt;/div&gt;
+                        &lt;script type="text/javascript"&gt;window.policat_target_id_<?php echo $id ?> = "policat_<?php echo $id ?>";&lt;/script&gt;
+                        &lt;script type="text/javascript" src="<?php echo url_for('api_js_widget', array('id' => $id), true) ?>" async="true"&gt;&lt;/script&gt;
+                        &lt;style&gt;.policat-loading{position:relative;height:1em;text-align:center}@keyframes policatspin{to{transform:rotate(360deg)}}
+                        .policat-loading::after{content:'';box-sizing:border-box;position:absolute;top:0.33em;width:1em;height:1em;margin-left:1em;border-radius:50%;border-top:2px solid #333;border-right:2px solid transparent;animation:policatspin 0.8s linear infinite}&lt;/style&gt;</code></p>
                 <p><b>Shareable widget page for testing or standalone use (without embedding):</b> <a target="_blank" href="<?php echo url_for('widget_page', ['id' => $id], true) ?>"><?php echo url_for('widget_page', ['id' => $id], true) ?></a></p>
                 <?php if ($follows): ?>
                 <p><strong style="color:red">Attention: The action is following the action
@@ -47,4 +50,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>