mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-21 14:49:59 -04:00
12d5991505
- Created skeleton templates for events, notifications, plugins, presence, report, settings, and workflows to enhance loading states. - Implemented structured skeletons for tab details, tab events, maintenance backup, database tools, logging, multi-edit, presence, sessions, and system info. - Each template includes shimmer effects for loading indicators, improving user experience during data fetching.
107 lines
6.1 KiB
PHP
107 lines
6.1 KiB
PHP
<!-- Settings Loading Skeleton --------------------------------------------- -->
|
|
<div id="settings-skeleton">
|
|
|
|
<!-- Overview panel skeleton -->
|
|
<div class="skel-overview-panel">
|
|
<div class="skel-overview-heading">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:180px"></span>
|
|
</div>
|
|
<div class="skel-overview-body">
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
</div>
|
|
<div class="skel-overview-heading">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:180px"></span>
|
|
</div>
|
|
<div class="skel-overview-body">
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
<div class="skel-overview-card skel-shimmer col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Core section (open, with a plugin block) -->
|
|
<div class="skel-section">
|
|
<div class="skel-section-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:60px"></span>
|
|
</div>
|
|
<div class="skel-plugin-block">
|
|
<div class="skel-plugin-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:75px"></span>
|
|
<span class="skel-line skel-shimmer" style="width:210px"></span>
|
|
</div>
|
|
<div class="skel-plugin-body">
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System section (open) -->
|
|
<div class="skel-section">
|
|
<div class="skel-section-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:80px"></span>
|
|
</div>
|
|
<div class="skel-plugin-block">
|
|
<div class="skel-plugin-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:90px"></span>
|
|
<span class="skel-line skel-shimmer" style="width:185px"></span>
|
|
</div>
|
|
<div class="skel-plugin-body">
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device Scanners section (closed) -->
|
|
<div class="skel-section">
|
|
<div class="skel-section-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:140px"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other Scanners section (open) -->
|
|
<div class="skel-section">
|
|
<div class="skel-section-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:120px"></span>
|
|
</div>
|
|
<div class="skel-plugin-block">
|
|
<div class="skel-plugin-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:65px"></span>
|
|
<span class="skel-line skel-shimmer" style="width:200px"></span>
|
|
</div>
|
|
<div class="skel-plugin-body">
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:16%"></span><span class="skel-cell-desc skel-shimmer" style="width:40%"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" style="width:33%"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:19%"></span><span class="skel-cell-desc skel-shimmer" style="width:42%"></span><span class="skel-cell-input skel-shimmer"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Publishers section (closed) -->
|
|
<div class="skel-section">
|
|
<div class="skel-section-header">
|
|
<span class="skel-icon-block skel-shimmer"></span>
|
|
<span class="skel-line skel-shimmer" style="width:100px"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /Settings Loading Skeleton -------------------------------------------- -->
|