Как можно сделать лоадер на клике JS?

Kerm, почему в шоке?)

Как можно сделать лоадер на клике JS?

У меня вот так реализован логин, надо сюда лоадер подставить.

startLogin: ()=>{

        document.title='Login';
        window.location.hash='';
        $('body').empty();
        $('body').append(template.login_form);
        $('body').append(template.footer_html);
        onLoad.scriptsOn();
        $('.singin_button').click(function(e) {

          e.preventDefault();
        $('.login').append('<img src="./images/preloader.gif" class="preloader">');
        getData('/sapi/session/login', 'POST', $('.login').serialize()).then(result=>{
          $('.login').append('<img src="./images/preloader.gif" class="preloader">');
          if(result.code=='0') {
        
              onLoad.stattPageRender();
              onLoad.pageLoader();
        
              getData('/sapi/news/geturgent','POST',).then(result=>{
                console.log(result);
                if (result.code=='0') {
                  $('.main').append(template.poup_fade);
                $('.urgent-news').append(result.message);
                }
              })
              onLoad.userInfoRender(userinfo);
              onLoad.logOut();
          } else if(result.code=='104' || result.code=='1004' ) {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Неверная комбинация пары логин/пароль.</p><p> Повторите попытку</p></div>');
          } else {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Ошибка загрузки данных. Проверьте интернет соединение</p></div>');
          }
       $('.preloader').remove();
        });
        });
      },

Это форма логина, там идёт AJAX запрос по клику и надо чтоб пока идёт запрос и отрисовывается без перезагрузки страница, чтоб показывался лоадер. Я сделал его добавление вначале функции и удаление в конце, однако когда я кликаю, то страница как бы зависает на время работы функции, курсор становится указателем и лоадер на показывается, а потом страница отвисает аж когда функция отработала и страница отрисоваалась.

Как можно сделать лоадер на клике JS?

Kerm, У меня вот так сделано

startLogin: ()=>{

        document.title='Login';
        window.location.hash='';
        $('body').empty();
        $('body').append(template.login_form);
        $('body').append(template.footer_html);
        onLoad.scriptsOn();
        $('.singin_button').click(function(e) {

          e.preventDefault();
        $('.login').append('<img src="./images/preloader.gif" class="preloader">');
        getData('/sapi/session/login', 'POST', $('.login').serialize()).then(result=>{
          $('.login').append('<img src="./images/preloader.gif" class="preloader">');
          if(result.code=='0') {
        
              onLoad.stattPageRender();
              onLoad.pageLoader();
        
              getData('/sapi/news/geturgent','POST',).then(result=>{
                console.log(result);
                if (result.code=='0') {
                  $('.main').append(template.poup_fade);
                $('.urgent-news').append(result.message);
                }
              })
              onLoad.userInfoRender(userinfo);
              onLoad.logOut();
          } else if(result.code=='104' || result.code=='1004' ) {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Неверная комбинация пары логин/пароль.</p><p> Повторите попытку</p></div>');
          } else {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Ошибка загрузки данных. Проверьте интернет соединение</p></div>');
          }
       $('.preloader').remove();
        });
        });
      },

Это форма логина, там идёт AJAX запрос по клику и надо чтоб пока идёт запрос и отрисовывается без перезагрузки страница, чтоб показывался лоадер. Я сделал его добавление вначале функции и удаление в конце, однако когда я кликаю, то страница как бы зависает на время работы функции, курсор становится указателем и лоадер на показывается, а потом страница отвисает аж когда функция отработала и страница отрисоваалась.

Как учить программирование, чтобы понимать его и быть хорошим программистом?

Спасибо за ответ.

Мне просто казалось что топовые разработчики, уровня Google или Yandex по-мимо просто какого-либо языка программирования или Фреймворка, знают буквально всё: как этот язык устроен, как его проц рассчитывает и т.д. Но если достаточно знать язык программирования, на уровне инструмента, тогда ладно.

А в каких реальных задачах необходима математика, можете привести примеры? Кроме игр конечно или инженерных расчетов.

Как учить программирование, чтобы понимать его и быть хорошим программистом?

Elisey Vlasenko, Вот программирование надо воспринимать исключительно как инструмент? Ведь этих инструментов много, есть разные языки, с разными возможностями и устройством внутри.

Как учить программирование, чтобы понимать его и быть хорошим программистом?

Elisey Vlasenko, То есть, если я выучил условно какой-то фреймворк, но я понятия не имею как он устроен, как он обрабатывает мои скрипты, где хранится его "ядро" или "первопричина", в которой всё высчитывается и правила, по которым высчитывается, то я - программист?

Как учить программирование, чтобы понимать его и быть хорошим программистом?

prrrrrrr, Ну например, только веб. Вот создание сайтов и приложений, короче всё что связано с сетью.

Как учить программирование, чтобы понимать его и быть хорошим программистом?

prrrrrrr, мне интересно, что в головах у опытных разработчиков, какое количество знаний и как они мыслят. Чтобы понять к чему стремиться, дело не в веб-разработке, а в целом. Просто меня интересует в частности веб.

Как учить программирование, чтобы понимать его и быть хорошим программистом?

Ну я серьезное мнение хотел_

Как сделать такие тени для элемента?

там их несколько, сверху, снизу, разных цветов с наложением поверх других

Как подключить один JS файл в другой?

Модератор, они имеют прямое отношение.

Как подключить один JS файл в другой?

Модератор, в html скрипты подключаются

Как подключить один JS файл в другой?

Пашенька, export, но он не работает. Типо в Lib.js:

export class Main {
}

А в Main.js: import 'Main' from 'Lib.js';

Как сделать переход по ссылкам без перезагрузки?

Я делал так, но не работает

Как сделать переход по страницам сайта без презагрузки?

Дмитрий, можно пример?

Как сделать переход по страницам сайта без презагрузки?

Дмитрий, на якорях оно ж никуда не ведёт)