Рендеринг изображения на реакте: скачет картинка

[aleksejs]

Доброго дня, прошу совета по CSS. Который для меня, в общем, темный лес: обычно пишу логику, фронтенд - не моя стихия. Итак, по приложению (это пет-проект, просто чтоб руку набить на реакте).

Все вроде неплохо, кроме частного случая. Проблема дает о себе знать, только если соблюдены оба условия:

1) Просмотр веб-странички на мобильном устройстве.
2) В браузере мобильного устройства включен режим "Версия для ПК".

Суть траблы: при нажатии кнопки "Get Random Cat" (либо при первичной загрузке страницы) - html секунду/две скачет по ширине, пока рендерится картинка и браузер отрисовывает страничку. Не могу указать размеры картинки, которые каждый раз абсолютно произвольны. Добился того, что на ПК этой проблемы нет, нет и на смартфонах, если включен соответствующий режим просмотра. Но хотелось бы полностью устранить проблему, хотя бы в целях любопытства.

У кого будет время и желание глянуть, заранее спасибо. Демка здесь.

[Вадим Фролов]

Сообщение от aleksejs

Доброго дня, прошу совета по CSS. Который для меня, в общем, темный лес: обычно пишу логику, фронтенд - не моя стихия. Итак, по приложению (это пет-проект, просто чтоб руку набить на реакте).

Все вроде неплохо, кроме частного случая. Проблема дает о себе знать, только если соблюдены оба условия:

1) Просмотр веб-странички на мобильном устройстве.
2) В браузере мобильного устройства включен режим "Версия для ПК".

Суть траблы: при нажатии кнопки "Get Random Cat" (либо при первичной загрузке страницы) - html секунду/две скачет по ширине, пока рендерится картинка и браузер отрисовывает страничку. Не могу указать размеры картинки, которые каждый раз абсолютно произвольны. Добился того, что на ПК этой проблемы нет, нет и на смартфонах, если включен соответствующий режим просмотра. Но хотелось бы полностью устранить проблему, хотя бы в целях любопытства.

У кого будет время и желание глянуть, заранее спасибо. Демка здесь.

Скрол появляется горизонтальный снизу на секунду где то при загрузке картинок, а так все нормально. Его можно отменить стилями думаю, для скрола оси X нужно скрыть его. Почему появляется не знаю)

[aleksejs]

Сообщение от Вадим Фролов

...а так все нормально.

Не согласен. Насчет скролла знаю, но это фигня, сделаю, как руки дойдут. А описанную выше проблему - она есть, была то есть - удалось исправить. Попросту заменил лоадер (spinner) на родной из бутстрапа 5, и весь html перестал прыгать при загрузке картинки и показе спиннера. Хотите верьте, хотите нет, я сам не понимаю. Чертовщина....

Вот этот коммит.