mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-20 22:30:11 -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.
43 lines
1.3 KiB
PHP
43 lines
1.3 KiB
PHP
<div id="plugins-skeleton">
|
|
<div class="skel-plugins-wrap">
|
|
|
|
<!-- Left nav sidebar -->
|
|
<div class="skel-plugins-nav">
|
|
<?php
|
|
$widths = [72, 60, 80, 55, 68, 75];
|
|
for ($i = 0; $i < 6; $i++):
|
|
?>
|
|
<div class="skel-plugins-nav-item">
|
|
<span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
|
|
<!-- Right content area -->
|
|
<div class="skel-plugins-body">
|
|
<!-- Sub-tab bar -->
|
|
<div class="skel-tabs-bar" style="border-radius: 0 4px 0 0; margin-bottom: 0;">
|
|
<span class="skel-tab skel-shimmer"></span>
|
|
<span class="skel-tab skel-shimmer"></span>
|
|
<span class="skel-tab skel-shimmer"></span>
|
|
</div>
|
|
<!-- Data table -->
|
|
<div class="skel-table-box" style="border-top: none; border-radius: 0 0 4px 4px;">
|
|
<div class="skel-table-header-row">
|
|
<?php for ($j = 0; $j < 5; $j++): ?>
|
|
<span class="skel-th skel-shimmer"></span>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<?php for ($i = 0; $i < 8; $i++): ?>
|
|
<div class="skel-tr">
|
|
<?php for ($j = 0; $j < 5; $j++): ?>
|
|
<span class="skel-td skel-shimmer"></span>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|