Заглушка на сайт при переключении

[madeas]

Здравствуйте!
У меня есть идея, но я не совсем понимаю как ее реализовать.
Пояснение
У меня есть сайт, который имеет переключатель на рус/англ язык. В скрипте переключателя есть куки, но они почему-то не работают. Размер шрифта и сам шрифт у языковых версий разный, соответственно, при переключении происходит визуальный "сдвиг" некоторых элементов сайта.
Задача
Мне нужна помощь, чтобы починить куки и добавить "заглушку" в момент переключения. Что-то вроде прелоадера на пару секунд, например, в виде белого фона, чтобы контент успел подгрузиться как надо и пользователь не видел этих сдвигов. Можно создать svg на весь экран или на каждый контейнер, но я пока не разобрался как это работает.

Вот сам скрипт:

(function() {
        var body = document.getElementsByTagName('body')[0];

        var switcherEN = document.getElementById('switcher-en');
        var switcherRU = document.getElementById('switcher-ru');

        // Заранее считаем срок хранения кук
        var expires = new Date();
        expires.setDate(expires.getDate() + 366);
        expires.toUTCString();

        // Русский и английский заголовки
        var titleEN = document.getElementById('title-en');
        var titleRU = document.getElementById('title-ru');
        var title = {
          en: titleEN.getAttribute('content'),
          ru: titleRU.getAttribute('content')
        }

        var switchLang = function() {
          var lang = this.id
          lang = lang.replace('switcher-', '');

          // Меняем класс для BODY
          body.className = lang;

          // Записываем куки
          document.cookie = [
            'aplang=' + lang, '; expires=' + expires // используем expires, max-age не поддерживается в ИЕ
            , '; path=/', '; domain=' + document.location.host
          ].join('');
          document.title = title[lang];
        }

        switcherEN.onclick = switchLang;
        switcherRU.onclick = switchLang;
      })();

jQuery на сайте

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Я конечно понимаю, что это всего лишь заморочка, но хочется, чтобы продукт и сайт были качественными.

[Nexus]

Если есть jq, то и используйте его, зачем грузить под 100кб, если они не используются?

У вас в этом скрипте ничего не подгружается, как узнать, когда страница готова для показа?

(function() {
    $('#switcher-en,#switcher-ru').click(function() {
        const lang = this.id.toString().split('-').pop();

        let expires = new Date();
        expires = expires.setDate(expires.getDate() + 366).toUTCString();


        $('<div/>').attr({
            opacity: 0,
            'class': 'loader-layout'
        }).html(
            'Загрузка...'
        ).fadeIn(300, function() {
            document.body.className = lang;
            document.cookie = [
                'aplang=' + lang,
                'expires=' + expires, // используем expires, max-age не поддерживается в ИЕ
                'path=/',
                'domain=' + document.location.host
            ].join('; ');
            document.title = $('#title-' + lang).attr('content');


            setTimeout(function(that) {
                $(that).fadeOut(300, function() {
                    this.parentNode.removeChild(this);
                });
            }, 2000, this);
        });

    });
})();

[madeas]

как узнать, когда страница готова для показа?

На смену языка приходится 0.5-2s, даже при слабом соединении. На это время можно добавить заглушку, т.е. активация в момент нажатия на кнопку + 2s длительности (при клике по одной из двух). И все же, хотелось бы настроить куки. Каждый раз переключать, пользователям будет не удобно.

[Nexus]

На смену языка приходится 0.5-2s, даже при слабом соединении.

От чего это время зависит? Для чего требуется столько времени?
Заглушку я добавил, осталось css ей определить.

И все же, хотелось бы настроить куки. Каждый раз переключать, пользователям будет не удобно.

Что значит "настроить куки"?

[madeas]

Что-то не получается. Надо же заменить полностью скрипт на ваш? Если да, то при замене на скрипт выше, кнопки вовсе перестают работать. А время ни от чего не зависит. Нужно просто отталкиваться от момента "клика" по кнопке. В этот момент окно не перезагружается, просто происходит скрытие/появление блоков, в зависимости от языка. Попробуйте попереключать на сайте, вы поймете о чем речь.

Надо починить скрипт, добавить запоминание пользовательского выбора языка. Знать бы только как это сделать.

[Nexus]

Что-то не получается. Надо же заменить полностью скрипт на ваш?

Да.

Надо же заменить полностью скрипт на ваш? Если да, то при замене на скрипт выше, кнопки вовсе перестают работать

Консоль смотрели?

Надо починить скрипт, добавить запоминание пользовательского выбора языка.

madeas.github.io - это же ваш сайт, я правильно понимаю?
Там указано, что вы - Frontend developer
Почему у вас столько тривиальная задача вызывает такие сложности?
Кука у вас уже записывается, осталось только прочитать сохраненное значение и кликнуть на нужную кнопку.

[madeas]

Консоль смотрели?

Не понял. Какую?)

Почему у вас столько тривиальная задача вызывает такие сложности?

Наверное, потому что пока не сталкивался с такой задачей. Если бы мог решить сам, логично предположить, что не стал бы здесь спрашивать.

[Nexus]

Не понял. Какую?)

Frontend developer и про консоль не слышал, чудеса
Почитайте: https://learn.javascript.ru/debugging-chrome

[madeas]

Консоль - понятие растяжимое)
Кажется и так разобрался.

[Nexus]

Так вы уточняйте про какую) Их, как бы, много)

Какую консоль кроме той, что в devTools еще можно использовать для отладки?