Как избежать задержек или минимизировать их при применении стилей для мобильных?

Question

[lagudal]

Есть лейаут, к которому применены стили по принципу desktop first.
Для моб соот-но все реализовано с media query.
Но вот тут есть проблема. Некоторые элементы изменены стилями весьма значительно, меняется их местоположение - выше - ниже, ширина, высота и тд и тп. При перезагрузке страницы в мобильном разрешении такие элементы отрисовываются сначала согласно лейаута и стилям для десктопа, и только через определенную временную задержку подтягиваются стили для моб и все встает на свои места. Просто при перезагрузке как бы "скачет" верстка.
Вот пример того что я имею в виду - инпут поиска, сначала занимает ширину заданную для десктопа, и только после какого то интервала уже 100%. Ну и видно как дальше все подскакивает.
видеоскрин
Как эффективнее всего сгладить такие "скачки" - понятно что на все нужно какое то время, ну все же.

Answer 1

[Александр]

Обычно делают прелоадер https://itchief.ru/javascript/how-to-make-preloade...

Comments

[Александр]

lagudal если помогло, то отметьте решением