Перед загрузкой лоадером на момент видно саму страницу по причине того, что JavaScript является языком программирования, выполняющимся на стороне клиента (в браузере), и может быть выполнен только после того, как весь HTML-код страницы был полностью загружен и интерпретирован браузером.
Когда браузер загружает веб-страницу, он начинает последовательно анализировать HTML-код и строить Document Object Model (DOM) - структуру, которая представляет все элементы страницы и их иерархические отношения. В процессе этого анализа браузер также выполняет и загружает встречающиеся на странице скрипты JavaScript.
Однако, во время выполнения скрипта браузер не останавливает обработку и отображение контента страницы. То есть, он продолжает отрисовку контента на основе уже интерпретированной части HTML, включая стили CSS и прочие ресурсы. Поэтому пользователь видит страницу, даже если JavaScript еще не полностью загрузился или выполнился.
Чтобы избежать этой ситуации и показывать только лоадер до полной загрузки JavaScript, можно использовать различные приемы. Например, можно скрыть основной контент страницы при ее загрузке, а затем показать его только после полной загрузки JavaScript. Для этого можно использовать CSS свойства, классы, а также JavaScript-события, такие как DOMContentLoaded или load.
В общем случае, для более точного контроля над представлением страницы перед загрузкой лоадером, можно использовать асинхронную загрузку скриптов, а также разбить их на модули или части, которые могут быть загружены и выполнены по мере необходимости. Это позволит браузеру более эффективно управлять последовательностью загрузки и отображения контента. Однако следует помнить о балансе между временем загрузки и комфортом пользователя – слишком долгая загрузка JavaScript может отрицательно сказаться на пользовательском опыте.