limit server requests

static/js/app.js

@@ -8,22 +8,27 @@ const coinTop50 = {
         items: [],
         rangeDate:RANGE_MAX,
         maxRange:RANGE_MAX,
+        source:axios.CancelToken.source(),
         datepicker:null
       }
     },
+    created(){
+      this.requestData = _.throttle(this.requestData,500)
+    },
     mounted() {
       this.requestData(this.date)
       const elems = document.querySelectorAll('.datepicker');
       this.datepicker = M.Datepicker.init(elems, {onClose:()=>{
         this.date = this.datepicker.date.toISOString().slice(0,10)
       }})[0];
+      
     },
     watch:{
       date(newDate,oldDate){
         this.requestData(newDate)
       },
       rangeDate(newValue){
-        this.date = MIN_DATE.add(newValue,"d").format("YYYY-MM-DD");
+          this.date = MIN_DATE.add(newValue,"d").format("YYYY-MM-DD");
       }
     },
     methods:{
@@ -32,6 +37,13 @@ const coinTop50 = {
         const url = `/top50json/${d.getDate()}-${("0"+(d.getMonth()+1)).slice(-2)}-${d.getFullYear()}/`;
         axios.get(url)
             .then(this.handleJsonUpdate)
+            .catch(function (thrown) {
+              if (axios.isCancel(thrown)) {
+                console.log('Request canceled', thrown.message);
+              } else {
+                console.log(thrown)
+              }
+            });
       },
       handleJsonUpdate(response){
         this.items = response.data

templates/async_list.html

@@ -13,9 +13,9 @@
         transition: transform 1s;
       }
       .flip-list-enter-active, .flip-list-leave-active {
-        transition: all 1s;
+        transition: all .2s;
       }
-      .flip-list-enter, .flip-list-leave-to /* .list-leave-active below version 2.1.8 */ {
+      .flip-list-enter, .flip-list-leave-to {
         opacity: 0;
         transform: translateX(30px);
       }
@@ -26,6 +26,8 @@
       .amount{
         text-align: end;
         width: 100%;
+        font-family: "Roboto Mono", monospace;
+        font-size:0.9rem;
       }
       .amount::before{
         content: "$ ";
@@ -72,6 +74,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
     <script src="https://unpkg.com/vue@next"></script>
     <script src="{{ url_for('static', filename='js/app.js')}}"></script>
   </body>