0.0.192

static/css/styles(boris).css

@@ -11,7 +11,7 @@
 }
 
 .text-align-center{
-    text-align: center;
+    text-align: -webkit-center;
     width: 100%;
 
 }
@@ -552,6 +552,8 @@
     padding: 20px;
     font-size: 16px;
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .insert_users{
@@ -1460,4 +1462,17 @@
     font-size: 18px;
     font-weight: 600;
     border-radius: 10px;
+}
+
+.button-find-more-routes.hide{
+    display: none;
+}
+
+.loader_f_loading_routes{
+    width: 25px;
+    height: 25px;
+    display: none;
+}
+.loader_f_loading_routes.show{
+    display: block;
 }

static/js/dynamic_loading_routes.js

@@ -2,6 +2,9 @@ let page_iterator = 2
 
 
 function load_routes (el) {
+    let loader = document.querySelector(".loader_f_loading_routes")
+    loader.classList.toggle("show")
+    el.classList.toggle("hide")
     event.preventDefault()
     // let el_parent = el.parentNode
     // let new_el = el_parent.previousSibling.previousSibling
@@ -25,12 +28,21 @@ function load_routes (el) {
         // enctype: 'json',
         data: JSON.stringify(data),
         success: function(data){
+
             // new_el.parentNode.insertBefore(data.html, new_el.nextSibling);
             let url_insert = ".page_routes_" + page_iterator
-            document.querySelector(url_insert).innerHTML = data.html
+            let place_ins = document.querySelector(url_insert)
+            place_ins.innerHTML = data.html
             let old_page_iterator = page_iterator
             page_iterator++
-
+            loader.classList.toggle("show")
+            el.classList.toggle("hide")
+            let el_scroll = place_ins.firstElementChild
+            el_scroll.scrollIntoView(
+            {
+                    behavior:"smooth"
+                }
+            )
             let new_page_routes = document.createElement("div")
             new_page_routes.classList.add("page_routes_" + page_iterator)
             $(new_page_routes).insertAfter(".page_routes_" + old_page_iterator);

templates/pages/p_results_find_route.html

@@ -219,6 +219,7 @@
                     </div>
                     <div class="text-align-center">
                         <button class="button-find-more-routes" id="25" onclick="load_routes(this)">Показать ещё 10</button>
+                        <img class="loader_f_loading_routes" src="{% static "img/svg/loader.svg" %}">
                     </div>
                 </div>