Продолжим тему ответов на ваши вопросы на собеседованиях.
Почему ваши? Ну потому что вы их предлагали! Вот тут: https://t.me/htmlshit/3290
Итак, вопрос: как показать спиннер загрузки прямо в кнопке, сохранив размер кнопки и её доступность?
То есть, не делать такое:
‹button>{ isLoading ? <LoadingSpinner/> : "Save" }</button>
Очевидный ответ: абсолютом спиннер сверху навернуть. Но мы же не в 2009 году, в самом деле!
А что, если нам больше одного наслоения надо? А что, если на разных устройствах нужен разный порядок отображения, например, спиннер и текст одновременно? А что, если текст состояния загрузки на самом деле длиннее, чем основной? Мы же не хотим, чтоб интерфейс прыгал.
Когда-то давно мы сделали табло, в котором меняли строки на разных языках: https://t.me/htmlshit/2814
И там как раз применили такую фишку CSS Grid, как стек. Т. е. накладывание блоков друг на друга без изменения их позиционной модели.
Самое время это применить и тут!
Только на сей раз мы воспользуемся именованными зонами грида, вместо
grid-area: 1/1 как в прошлом примере.Итого:
.button {
display: grid;
grid-template-areas: "stack";
.spinner,
.text {
grid-area: stack;
justify-self: center;
}
}
Ну и как-то так вышло: https://codepen.io/alinaki/pen/ogvBMLv
#css #grid