AJAX с Placeholder'ом (скелетон-загрузка)

📌 Что это? Пользователь видит структуру окна мгновенно, а реальный контент подгружается в фоне. Создаётся ощущение быстрой работы.

Как это работает

$.xpopup.open({
    type: 'ajax',
    content: '/api/data'
});

$.xpopup.open({
    type: 'ajax',
    content: '/api/data',
    placeholder: '#mySkeleton',   // ← главное отличие
    replaceAnimation: true
});

Демонстрация загрузки диалога с пользователем. Сначала показывается скелетон — заглушка диалогового окна, затем подгружаются реальные сообщения.

Загрузка подробной информации о товаре. Скелетон повторяет структуру конечного контента.

Нажмите на кнопки и сравните восприятие. Оба окна загружают один и тот же контент с искусственной задержкой 1.5 секунды.

Результат: скелетон создаёт ощущение мгновенной загрузки — пользователь видит структуру окна сразу, а контент появляется плавно.

Если не нужна плавная замена, можно отключить анимацию опцией replaceAnimation: false. Контент заменится мгновенно.

Опция replaceDelay: 1000 задаёт задержку между получением контента и его отображением. Полезно для демонстрации или синхронизации с анимациями.

Опция	Тип	По умолчанию	Описание
`placeholder`	string	`null`	CSS-селектор скрытого элемента-заглушки. Если указан, включается режим "сначала заглушка, потом AJAX".
`replaceAnimation`	boolean	`true`	Плавная замена заглушки на реальный контент (fadeOut/fadeIn).
`replaceDelay`	number	`0`	Задержка в миллисекундах перед заменой контента (после успешной загрузки).
`clearPlaceholderAfterLoad`	boolean	`true`	Удалять клон placeholder'а из DOM после загрузки реального контента.