tools: JS node: cleanup

Author: aberaud

tools/proxy_node.html

@@ -9,16 +9,16 @@
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 		<script type="text/javascript">"use strict";
-var onGet;
-var onPut;
-var setServer;
+let onGet;
+let onPut;
+let setServer;
 const valueGetElement = function(o) {
     const d = window.atob(o.data);
     return d;
 };
 $(function() {
-    var request = undefined;
-    var server;
+    let request = undefined;
+    let server;
     const getTools = $("#getTools");
     const getBtn = $("#getBtn");
     const getDropdown = $("#getDropdown");
@@ -46,22 +46,29 @@
             return false;
         const input = $("#getKey").val();
         group.empty();
+        let lastAppended = 0;
+        let start = new Date().getTime();
         request = new XMLHttpRequest();
         request.onreadystatechange = function(event) {
             if (this.readyState >= XMLHttpRequest.LOADING) {
                 if (this.readyState == XMLHttpRequest.DONE) {
                     clearGetRequest();
                 }
                 if (this.status === 200) {
-                    group.empty();
                     const elements = this.responseText.split("\n");
-                    elements.forEach(function(element) {
+                    const elementsLength = elements.length;
+                    const now = new Date().getTime();
+                    for (let i = lastAppended; i < elementsLength; i++) {
+                        const element = elements[i];
                         if (!element || element.length == 0)
                             return;
                         const o = JSON.parse(element);
                         const d = window.atob(o.data);
-                        $('<li class="list-group-item"/>').append(valueGetElement(o)).appendTo(group);
-                    });
+                        const delay = Math.max(0, start-now);
+                        $('<li class="list-group-item"/>').append(valueGetElement(o)).appendTo(group).hide().delay(delay).slideDown(100);
+                        lastAppended = i+1;
+                        start = Math.max(start, now)+25;
+                    }
                 } else if (this.status !== 0) {
                     group.empty().append($('<li class="list-group-item list-group-item-danger"/>').text("Error loading content: " + this.statusText));
                 }
@@ -109,7 +116,7 @@
         serverStatus.empty();
         serverBtn.button('loading');
         $.getJSON(server, function(data){
-            serverStatus.append('<b>Node</b> ').append(data.node_id);
+            $('<span><b>Node</b> '+data.node_id+'</span>').appendTo(serverStatus).hide().fadeIn();
         }).fail(function(error) {
             serverStatus.html("<div class='alert alert-danger' style='margin-bottom: 0px;'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> Can't access node</div>");
         }).always(function(error) {
@@ -154,7 +161,6 @@ <h1>OpenDHT tester</h1>
                                     <button id="getBtn" class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>" type="submit">Get</button>
                                     <button id="getDropdown"type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
                                     <ul class="dropdown-menu">
-                                        <li><a id="getDropBtn" href="#">Get</a></li>
                                         <li><a id="listenBtn" href="#">Listen</a></li>
                                     </ul>
                                     <button id="getStopBtn" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>