- added loading anim

view/lean-api/request_debugger.phtml

@@ -3,20 +3,35 @@
 {% language.set "lean.api.request.debugger" %}
 
 <div id="request-debugger" class="hide">
-    <div class="request-head">
+    <div class="request-compose">
-        <div class="method" style="">
+        <div class="loading-anim">
-            {% ui.select "method", MethodEnum::generateArray(), post('method') %}
+            <div class="la-ball-spin-clockwise-fade-rotating">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
         </div>
 
-        <div class="url" style="flex-grow: 1;">
+        <div class="request-head">
-            {% ui:text "url" %}
+            <div class="method" style="">
-            {% ui:text "token", $this->session->jwt %}
+                {% ui.select "method", MethodEnum::generateArray(), post('method') %}
-            <button class="request-btn">Envoyer</button>
+            </div>
-        </div>
-    </div>
 
-    <div class="request-content">
+            <div class="url" style="flex-grow: 1;">
-        <div id="request" style="min-height: 150px; width:100%; border:1px solid #ededed;">{}</div>
+                {% ui:text "url" %}
+                {% ui:text "token", $this->session->jwt %}
+                <button class="request-btn">Envoyer</button>
+            </div>
+        </div>
+
+        <div class="request-content">
+            <div id="request" style="min-height: 150px; width:100%; border:1px solid #ededed;">{}</div>
+        </div>
     </div>
 
     <div class="request-response hide">
@@ -44,7 +59,18 @@
     .response-head .response-code {background:#dfdfdf;padding:0 5px;font-weight: bold;line-height: 29px;font-size: 80%;}
     .response-head .response-message {padding:0 10px;background:#fbfbfb;line-height: 30px;font-size: 80%;}
 
+    .request-compose {position:relative;}
+    .loading-anim {display:none;position:absolute;left:0;right:0;top:0;bottom:0;justify-content: center;align-items: center;z-index: 15;background: rgba(122, 121, 121, 0.25);}
+    .la-ball-spin-clockwise-fade-rotating {color: #0f6ab4!important;}
+    .loading .loading-anim {display: flex;}
+
     #response {max-height: 66vh;}
+    /*!
+    * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+    * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+    * Licensed under MIT
+    */
+    .la-ball-spin-clockwise-fade-rotating,.la-ball-spin-clockwise-fade-rotating>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-spin-clockwise-fade-rotating{display:block;font-size:0;color:#fff}.la-ball-spin-clockwise-fade-rotating.la-dark{color:#333}.la-ball-spin-clockwise-fade-rotating>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-spin-clockwise-fade-rotating{width:32px;height:32px;-webkit-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;-moz-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;-o-animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear}.la-ball-spin-clockwise-fade-rotating>div{position:absolute;top:50%;left:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;border-radius:100%;-webkit-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;-moz-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;-o-animation:ball-spin-clockwise-fade-rotating 1s infinite linear;animation:ball-spin-clockwise-fade-rotating 1s infinite linear}.la-ball-spin-clockwise-fade-rotating>div:nth-child(1){top:5%;left:50%;-webkit-animation-delay:-.875s;-moz-animation-delay:-.875s;-o-animation-delay:-.875s;animation-delay:-.875s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;-webkit-animation-delay:-.75s;-moz-animation-delay:-.75s;-o-animation-delay:-.75s;animation-delay:-.75s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(3){top:50%;left:95%;-webkit-animation-delay:-.625s;-moz-animation-delay:-.625s;-o-animation-delay:-.625s;animation-delay:-.625s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;-webkit-animation-delay:-.375s;-moz-animation-delay:-.375s;-o-animation-delay:-.375s;animation-delay:-.375s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;-webkit-animation-delay:-.25s;-moz-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.25s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;-webkit-animation-delay:-.125s;-moz-animation-delay:-.125s;-o-animation-delay:-.125s;animation-delay:-.125s}.la-ball-spin-clockwise-fade-rotating>div:nth-child(8){top:18.179464974%;left:18.1803700518%;-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.la-ball-spin-clockwise-fade-rotating.la-sm{width:16px;height:16px}.la-ball-spin-clockwise-fade-rotating.la-sm>div{width:4px;height:4px;margin-top:-2px;margin-left:-2px}.la-ball-spin-clockwise-fade-rotating.la-2x{width:64px;height:64px}.la-ball-spin-clockwise-fade-rotating.la-2x>div{width:16px;height:16px;margin-top:-8px;margin-left:-8px}.la-ball-spin-clockwise-fade-rotating.la-3x{width:96px;height:96px}.la-ball-spin-clockwise-fade-rotating.la-3x>div{width:24px;height:24px;margin-top:-12px;margin-left:-12px}@-webkit-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-moz-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-moz-transform:rotate(-360deg);transform:rotate(-360deg)}}@-o-keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-o-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes ball-spin-clockwise-fade-rotating-rotate{100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}}@-webkit-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-moz-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-o-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;-webkit-transform:scale(.5);-moz-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
 </style>
 
 <script src="{% asset 'static/ace/src-noconflict/ace.js' %}" type="text/javascript" charset="utf-8"></script>
@@ -139,7 +165,7 @@
                 }
 
                 formatResponse("ace/mode/" + aceMode);
-            });
+            }).finally(() => requestDebugger.classList.remove("loading"));
 
             responseResponse.classList.toggle('hide', false);
         });
@@ -157,17 +183,22 @@
     });
 
     async function launchRequest(method = "POST", url = "", body = "{}") {
+        let headers = {
+            "Content-Type": "application/json"
+        };
+
+        if (token.value) {
+            headers['Authorization'] = `Bearer ${token.value}`;
+        }
+
         method = method.toUpperCase();
 
         let responseData = {
             method: method,
             mode: "cors",
             cache: "no-cache",
-            credentials: "omit",
+            credentials: headers.Authorization ? "omit" : "same-origin",
-            headers: {
+            headers: headers,
-                "Content-Type": "application/json",
-                'Authorization': `Bearer ${token.value}`
-            },
             redirect: "follow",
             referrerPolicy: "no-referrer"
         };
@@ -176,6 +207,8 @@
             responseData.body = body;
         }
 
+        requestDebugger.classList.add("loading");
+
         return await fetch(url, responseData);
     }