feat: Добавить рендеринг плейсхолдеров во время загрузки страницы для улучшения пользовательского интерфейса и информирования о состоянии загрузки
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m42s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m42s
This commit is contained in:
@@ -28,6 +28,37 @@ function PageHeaderActions({
|
|||||||
onOnlineUpdate,
|
onOnlineUpdate,
|
||||||
onBackgroundUpdate,
|
onBackgroundUpdate,
|
||||||
}) {
|
}) {
|
||||||
|
// Рендер плейсхолдеров во время загрузки/перезагрузки страницы
|
||||||
|
if (loading) {
|
||||||
|
const showUpdateGroup = Boolean(onBackgroundUpdate || onOnlineUpdate);
|
||||||
|
const placeholderBtn = (width = 120) => (
|
||||||
|
<span
|
||||||
|
className="btn disabled placeholder me-2"
|
||||||
|
style={{ height: 38, width }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div className="header-actions" role="toolbar" aria-label="Действия страницы (загрузка)">
|
||||||
|
<div className="btn-group">
|
||||||
|
{showUpdateGroup && (
|
||||||
|
<div className="btn-group">
|
||||||
|
{placeholderBtn(170)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="vr d-none d-lg-inline" />
|
||||||
|
<div className="btn-group">
|
||||||
|
{onRefresh && placeholderBtn(120)}
|
||||||
|
{(onImport || onExport) && placeholderBtn(160)}
|
||||||
|
{onClear && placeholderBtn(130)}
|
||||||
|
{onClearCommunities && placeholderBtn(180)}
|
||||||
|
{onSave && placeholderBtn(140)}
|
||||||
|
{onHistory && placeholderBtn(110)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="header-actions" role="toolbar" aria-label="Действия страницы">
|
<div className="header-actions" role="toolbar" aria-label="Действия страницы">
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
|
|||||||
Reference in New Issue
Block a user