Запретить мигание исходного контента (FOUC) на странице благодарности/заказа в магазине при замене контента с помощью Ja ⇐ Html

[Anonymous]

Я настраиваю страницу благодарности/статуса заказа, заменяя содержимое по умолчанию пользовательским разделом «Герой» с использованием JavaScript и CSS.
Логика работает правильно, но при загрузке страницы происходит короткая вспышка, на которой виден исходный контент Shopline, а затем его заменяет мой пользовательский контент. Это вызывает заметный визуальный сбой (FOUC).
Я хочу, чтобы страница оставалась скрытой (или отображалась загрузчик) пока мой собственный главный контент не будет полностью внедрен, чтобы контент по умолчанию никогда не был виден.

Код: Выделить всё

(function () {
const data = window.scriptParams;

const heroHtml = `


${data.thank_you_heading || ''}
${data.thank_you_text || ''}


`;

const loader = document.createElement('div');
loader.className = 'lk-loader';
loader.innerHTML = '';
document.body.appendChild(loader);

const hideLoader = () => {
loader.classList.add('hidden');
setTimeout(() => loader.remove(), 300);
};

const applyHero = () => {
const section = document.getElementById(
'shopline-section-trade/thankyou/order_status'
);
if (!section) return false;

const desc = section.querySelector('#trade_order_description');
if (!desc) return false;

desc.innerHTML = heroHtml;

document
.getElementById('sl_trade_content')
?.classList.add('lk-content-ready');

hideLoader();
return true;
};

if (document.readyState !== 'loading') {
applyHero();
}

const observer = new MutationObserver(() => {
if (applyHero()) observer.disconnect();
});

observer.observe(document.body, { childList: true, subtree: true });

window.addEventListener('DOMContentLoaded', () => {
applyHero();
});
})();

css, примененный в thankyou.css:

Код: Выделить всё

#sl_trade_content {
opacity: 0 !important;
visibility: hidden !important;
}

#sl_trade_content.lk-content-ready {
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.3s ease;
}

/* Loader */
.lk-loader {
position: fixed;
inset: 0;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.lk-loader.hidden {
opacity: 0;
visibility: hidden;
}

/* Hide default Shopline blocks */
div#shopline-section-trade\/thankyou\/continue_shopping,
div#shopline-section-trade\/thankyou\/package_list,
div#shopline-section-trade\/thankyou\/customer_info {
display: none !important;
}

Фактическое поведение

• При загрузке страницы На короткое время отображается текст благодарности Shopline по умолчанию
• Через долю секунды появляется загрузчик, и его заменяет мой собственный главный контент

Ожидаемое поведение

• Содержимое по умолчанию не должно никогда не быть видимым
• Страница должна либо:
  
  оставаться скрытой до тех пор, пока не будет внедрен герой, либо
• немедленно показывать загрузчик, а затем показывать пользовательский контент

Что я пробовал

• Скрытие контента с помощью CSS (

  Код: Выделить всё

  opacity: 0

  , видимость: скрыта)
• Внедрение загрузчика перед манипуляцией с DOM
• Использование MutationObserver для ожидания содержимого SSR
• Выполнение логики в DOMContentLoaded

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

Вопрос
Как я могу полностью предотвратить начальное мигание содержимого Shopline по умолчанию и обеспечить, чтобы мой пользовательский контент (или загрузчик) отображался первым?
В частности:

• есть ли способ скрыть содержимое SSR раньше?
• Нужно ли это обрабатывать с помощью встроенного CSS, внедрения или другой стратегии синхронизации JS?
• Известно ли это ограничение конвейера рендеринга Shopline?

Подробнее здесь: https://stackoverflow.com/questions/798 ... age-when-r