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.
79 lines
4.6 KiB
PHP
79 lines
4.6 KiB
PHP
<!-- Sessions Tab Skeleton ================================================= -->
|
|
<div id="skel-tab-sessions" class="skel-tab-pane">
|
|
<div class="skel-table-box">
|
|
<div class="skel-table-header-row">
|
|
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:2"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:19%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Sessions Tab Skeleton ================================================ -->
|