mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-21 06:39:52 -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.
68 lines
2.5 KiB
PHP
68 lines
2.5 KiB
PHP
<!-- Device Details Loading Skeleton ======================================= -->
|
|
<div id="device-details-skeleton">
|
|
|
|
<!-- Content header area -------------------------------------------------- -->
|
|
<div class="skel-detail-header">
|
|
<div class="skel-detail-title skel-shimmer"></div>
|
|
<div class="skel-detail-info-panel">
|
|
<div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
|
|
<div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
|
|
<span class="skel-line skel-shimmer" style="width:55%"></span>
|
|
<span class="skel-line skel-shimmer" style="width:38%"></span>
|
|
<span class="skel-line skel-shimmer" style="width:45%"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top stat tiles -------------------------------------------------------- -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
|
|
<div class="skel-tile">
|
|
<div class="skel-tile-inner">
|
|
<div class="skel-tile-num skel-shimmer"></div>
|
|
<div class="skel-tile-label skel-shimmer"></div>
|
|
</div>
|
|
<div class="skel-tile-icon-area">
|
|
<div class="skel-tile-icon-shape skel-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
|
|
<div class="skel-tile">
|
|
<div class="skel-tile-inner">
|
|
<div class="skel-tile-num skel-shimmer"></div>
|
|
<div class="skel-tile-label skel-shimmer"></div>
|
|
</div>
|
|
<div class="skel-tile-icon-area">
|
|
<div class="skel-tile-icon-shape skel-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
|
|
<div class="skel-tile">
|
|
<div class="skel-tile-inner">
|
|
<div class="skel-tile-num skel-shimmer"></div>
|
|
<div class="skel-tile-label skel-shimmer"></div>
|
|
</div>
|
|
<div class="skel-tile-icon-area">
|
|
<div class="skel-tile-icon-shape skel-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
|
|
<div class="skel-tile">
|
|
<div class="skel-tile-inner">
|
|
<div class="skel-tile-num skel-shimmer"></div>
|
|
<div class="skel-tile-label skel-shimmer"></div>
|
|
</div>
|
|
<div class="skel-tile-icon-area">
|
|
<div class="skel-tile-icon-shape skel-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- /Device Details Loading Skeleton ====================================== -->
|