From 12d5991505f00c087f53727fa2f48da750ff3d34 Mon Sep 17 00:00:00 2001 From: "Jokob @NetAlertX" <96159884+jokob-sk@users.noreply.github.com> Date: Sat, 20 Jun 2026 11:53:00 +0000 Subject: [PATCH] Add skeleton templates for various sections - 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. --- front/appEvents.php | 1 - front/css/app.css | 240 +++++++------- front/deviceDetails.php | 20 +- front/deviceDetailsEdit.php | 7 + front/deviceDetailsEvents.php | 7 + front/deviceDetailsPresence.php | 9 + front/deviceDetailsSessions.php | 8 + front/devices.php | 13 +- front/events.php | 13 +- front/maintenance.php | 28 +- front/network.php | 1 - front/php/templates/footer.php | 3 + front/php/templates/migrationCheck.php | 2 - front/php/templates/skel_device_details.php | 67 ++++ front/php/templates/skel_devices.php | 301 ++++++++++++++++++ front/php/templates/skel_events.php | 44 +++ front/php/templates/skel_notifications.php | 19 ++ front/php/templates/skel_plugins.php | 42 +++ front/php/templates/skel_presence.php | 45 +++ front/php/templates/skel_report.php | 23 ++ ...ettings_skeleton.php => skel_settings.php} | 0 front/php/templates/skel_tab_details.php | 42 +++ front/php/templates/skel_tab_events.php | 75 +++++ front/php/templates/skel_tab_maint_backup.php | 11 + .../php/templates/skel_tab_maint_dbtools.php | 11 + .../php/templates/skel_tab_maint_logging.php | 10 + .../templates/skel_tab_maint_multiedit.php | 8 + front/php/templates/skel_tab_presence.php | 12 + front/php/templates/skel_tab_sessions.php | 78 +++++ .../templates/skel_tab_sysinfo_initcheck.php | 12 + .../templates/skel_tab_sysinfo_network.php | 8 + .../php/templates/skel_tab_sysinfo_server.php | 8 + .../templates/skel_tab_sysinfo_storage.php | 14 + front/php/templates/skel_workflows.php | 12 + front/plugins.php | 4 +- front/pluginsCore.php | 10 + front/presence.php | 10 +- front/report.php | 13 +- front/settings.php | 2 +- front/systeminfo.php | 9 +- front/userNotifications.php | 10 + front/workflows.php | 2 +- front/workflowsCore.php | 8 + 43 files changed, 1126 insertions(+), 136 deletions(-) create mode 100644 front/php/templates/skel_device_details.php create mode 100644 front/php/templates/skel_devices.php create mode 100644 front/php/templates/skel_events.php create mode 100644 front/php/templates/skel_notifications.php create mode 100644 front/php/templates/skel_plugins.php create mode 100644 front/php/templates/skel_presence.php create mode 100644 front/php/templates/skel_report.php rename front/php/templates/{settings_skeleton.php => skel_settings.php} (100%) create mode 100644 front/php/templates/skel_tab_details.php create mode 100644 front/php/templates/skel_tab_events.php create mode 100644 front/php/templates/skel_tab_maint_backup.php create mode 100644 front/php/templates/skel_tab_maint_dbtools.php create mode 100644 front/php/templates/skel_tab_maint_logging.php create mode 100644 front/php/templates/skel_tab_maint_multiedit.php create mode 100644 front/php/templates/skel_tab_presence.php create mode 100644 front/php/templates/skel_tab_sessions.php create mode 100644 front/php/templates/skel_tab_sysinfo_initcheck.php create mode 100644 front/php/templates/skel_tab_sysinfo_network.php create mode 100644 front/php/templates/skel_tab_sysinfo_server.php create mode 100644 front/php/templates/skel_tab_sysinfo_storage.php create mode 100644 front/php/templates/skel_workflows.php diff --git a/front/appEvents.php b/front/appEvents.php index f3aabcdb..cdbf33aa 100755 --- a/front/appEvents.php +++ b/front/appEvents.php @@ -1,7 +1,6 @@ diff --git a/front/css/app.css b/front/css/app.css index e5ef9890..4940cee6 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -2591,8 +2591,9 @@ table.dataTable tbody > tr.selected background-color: rgba(140, 140, 140, 0.05); } -/* ===== Settings Page Loading Skeleton ===== */ +/* ===== Loading Skeleton ===== */ +/* Custom properties (overridden in dark-patch.css for Dark/System themes) */ :root { --skel-base: #e2e2e2; --skel-shine: #f0f0f0; @@ -2607,23 +2608,6 @@ table.dataTable tbody > tr.selected 100% { background-position: 600px 0; } } -#settingsPage { - position: relative; -} - -#settings-skeleton { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 50; - background-color: var(--skel-bg); - padding-top: 50px; - padding-left: 20px; - padding-right: 20px; - min-height: 500px; -} - .skel-shimmer { background: linear-gradient( 90deg, @@ -2637,122 +2621,150 @@ table.dataTable tbody > tr.selected display: inline-block; } -/* Overview panel skeleton */ -.skel-overview-panel { - margin-bottom: 10px; - border-radius: 4px; - overflow: hidden; +/* Positioning anchors */ +#settingsPage, #devicesPage, #deviceDetailsPage, +#eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage, +#panDetails, #panSessions, #panPresence, #panEvents { + position: relative; +} +#panDetails, #panSessions, #panPresence, #panEvents { min-height: 420px; } +#tab_DBTools, #tab_BackupRestore, #tab_Logging, #tab_multiEdit { position: relative; min-height: 320px; } + +/* Page-level overlay base */ +#settings-skeleton, #devices-skeleton, #device-details-skeleton, +#events-skeleton, #presence-skeleton, #report-skeleton, +#notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane { + position: absolute; + top: 0; + left: 0; + right: 0; + background-color: var(--skel-bg); + padding: 15px; +} +#settings-skeleton, #devices-skeleton, #device-details-skeleton, +#events-skeleton, #presence-skeleton, #report-skeleton, +#notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; } +.skel-tab-pane { z-index: 10; min-height: 400px; } +#settings-skeleton { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; } +#devices-skeleton { top: 50px; min-height: 500px; } +#device-details-skeleton { min-height: 600px; } +#events-skeleton { top: 50px; min-height: 500px; } +#presence-skeleton { top: 50px; min-height: 500px; } +#report-skeleton { min-height: 400px; } +#notifications-skeleton { min-height: 400px; } +#workflows-skeleton { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; } +#plugins-skeleton { padding: 0; min-height: 400px; } + +/* Bordered containers */ +.skel-overview-panel, .skel-section, .skel-plugin-block, +.skel-chart-box, .skel-table-box, +.skel-detail-info-panel, .skel-detail-form, .skel-tabs-bar { border: 1px solid var(--skel-border); } -.skel-overview-heading { - height: 44px; - background: var(--skel-section); - display: flex; - align-items: center; - padding: 0 15px; - gap: 12px; -} - -.skel-overview-body { - padding: 12px; - background: var(--skel-panel-bg); - display: flex; - gap: 12px; - flex-wrap: wrap; -} - -.skel-overview-card { - min-width: 100px; - height: 76px; - border-radius: 4px; -} - -/* Section accordion skeleton */ -.skel-section { - margin-bottom: 8px; +/* Clipped rounded containers */ +.skel-overview-panel, .skel-section, .skel-plugin-block, +.skel-chart-box, .skel-table-box, .skel-tile { border-radius: 4px; overflow: hidden; - border: 1px solid var(--skel-border); } -.skel-overview-header { - height: 44px; - padding: 0 15px; - display: flex; - align-items: center; - gap: 14px; - background: var(--skel-panel-bg); -} - -.skel-section-header { - height: 44px; - padding: 0 15px; - display: flex; - align-items: center; - gap: 14px; +/* Section-toned backgrounds */ +.skel-overview-heading, .skel-section-header, .skel-plugin-header, +.skel-box-header, .skel-table-header-row, .skel-tile, .skel-tabs-bar { background: var(--skel-section); } -/* Plugin block inside an open section */ -.skel-plugin-block { - margin: 8px; - border-radius: 4px; - overflow: hidden; - border: 1px solid var(--skel-border); -} - -.skel-plugin-header { - height: 48px; - padding: 0 15px; - display: flex; - align-items: center; - gap: 14px; - background: var(--skel-section); -} - -.skel-plugin-body { +/* Panel-toned backgrounds */ +.skel-overview-body, .skel-overview-header, .skel-plugin-body, +.skel-detail-info-panel, .skel-detail-form { background: var(--skel-panel-bg); } -.skel-setting-row { +/* Flex rows with vertical centering */ +.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-plugin-header, +.skel-box-header, .skel-table-header-row, .skel-setting-row, .skel-tr, .skel-form-row, +.skel-tile-icon-area { display: flex; align-items: center; - gap: 10px; - padding: 11px 15px; - border-bottom: 1px solid var(--skel-border); } -.skel-setting-row:last-child { - border-bottom: none; +/* Standard header bar height + padding */ +.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-box-header { + height: 44px; + padding: 0 15px; } -/* Skeleton line / cell primitives */ -.skel-line { - height: 14px; - flex-shrink: 0; -} +/* Row separator borders */ +.skel-setting-row, .skel-tr, .skel-form-row { border-bottom: 1px solid var(--skel-border); } +.skel-setting-row:last-child, .skel-tr:last-child, .skel-form-row:last-of-type { border-bottom: none; } -.skel-icon-block { - width: 22px; - height: 16px; - flex-shrink: 0; -} +/* Standard data row spacing */ +.skel-setting-row, .skel-tr { gap: 10px; padding: 11px 15px; } -.skel-cell-name { - width: 20%; - height: 14px; - flex-shrink: 0; -} +/* Thin-line height (14px) */ +.skel-line, .skel-cell-name, .skel-cell-desc, .skel-th, .skel-form-label { height: 14px; } -.skel-cell-desc { - width: 36%; - height: 14px; - flex-shrink: 0; -} +/* Non-growing primitives */ +.skel-line, .skel-icon-block, .skel-cell-name, .skel-cell-desc, .skel-form-label { flex-shrink: 0; } + +/* Filling cells (flex: 1) */ +.skel-tile-inner, .skel-th, .skel-td, .skel-cell-input, .skel-form-input { flex: 1; } + +/* ----- Settings --------------------------------------------------------- */ +.skel-overview-panel { margin-bottom: 10px; } +.skel-overview-heading { gap: 12px; } +.skel-overview-body { padding: 12px; display: flex; gap: 12px; flex-wrap: wrap; } +.skel-overview-card { min-width: 100px; height: 76px; border-radius: 4px; } +.skel-section { margin-bottom: 8px; } +.skel-overview-header { gap: 14px; } +.skel-section-header { gap: 14px; } +.skel-plugin-block { margin: 8px; } +.skel-plugin-header { height: 48px; padding: 0 15px; gap: 14px; } +.skel-icon-block { width: 22px; height: 16px; } +.skel-cell-name { width: 20%; } +.skel-cell-desc { width: 36%; } +.skel-cell-input { height: 32px; } + +/* ----- Devices ---------------------------------------------------------- */ +.skel-tile { display: flex; height: 80px; } +.skel-tile-inner { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; } +.skel-tile-num { height: 26px; width: 55%; } +.skel-tile-label { height: 13px; width: 75%; } +.skel-tile-icon-area { width: 70px; justify-content: center; background: var(--skel-base); opacity: 0.6; } +.skel-tile-icon-shape { width: 38px; height: 38px; border-radius: 50%; } +.skel-chart-box { margin-bottom: 12px; } +.skel-box-header { gap: 12px; border-bottom: 1px solid var(--skel-border); } +.skel-chart-body { height: 220px; border-radius: 0; display: block; width: 100%; } +.skel-table-header-row { gap: 10px; padding: 10px 15px; border-bottom: 2px solid var(--skel-border); } +.skel-td { height: 13px; } + +/* ----- Device Details --------------------------------------------------- */ +.skel-detail-header { margin-bottom: 15px; } +.skel-detail-title { height: 26px; width: 42%; margin-bottom: 14px; } +.skel-detail-info-panel { display: flex; gap: 0; padding: 14px; border-radius: 4px; margin-bottom: 15px; max-width: 400px; } +.skel-tabs-bar { display: flex; gap: 4px; padding: 8px 10px 0; border-radius: 4px 4px 0 0; border-bottom: none; } +.skel-tab { height: 34px; width: 100px; border-radius: 4px 4px 0 0; flex-shrink: 0; } +.skel-detail-form { border-top: none; border-radius: 0 0 4px 4px; padding: 20px 15px; } +.skel-form-row { gap: 15px; padding: 9px 0; } +.skel-form-label { width: 18%; min-width: 100px; } +.skel-form-input { height: 32px; } +.skel-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 15px; } +.skel-form-btn { height: 34px; width: 100px; } + +/* ----- Workflows -------------------------------------------------------- */ +.skel-workflow-card { border: 1px solid var(--skel-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; } +.skel-workflow-header { display: flex; align-items: center; height: 48px; padding: 0 15px; background: var(--skel-section); } + +/* ----- Plugins ---------------------------------------------------------- */ +.skel-plugins-wrap { display: flex; gap: 0; min-height: 400px; } +.skel-plugins-nav { width: 165px; flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; } +.skel-plugins-nav-item { display: flex; align-items: center; padding: 9px 15px; border-bottom: 1px solid var(--skel-border); } +.skel-plugins-nav-item:last-child { border-bottom: none; } +.skel-plugins-body { flex: 1; padding: 0; } + +/* ----- Systeminfo tabs -------------------------------------------------- */ +.skel-info-tab { padding: 15px; min-height: 360px; } + +/* ===== /Loading Skeleton ===== */ -.skel-cell-input { - flex: 1; - height: 32px; -} -/* ===== /Settings Page Loading Skeleton ===== */ \ No newline at end of file diff --git a/front/deviceDetails.php b/front/deviceDetails.php index 05067264..f77c7a94 100755 --- a/front/deviceDetails.php +++ b/front/deviceDetails.php @@ -21,11 +21,12 @@ -
+
+ +
-

 Quering device info... @@ -597,7 +598,22 @@ window.onload = function() { updateChevrons(mac); await renderSmallBoxes(); main(); + hideDeviceDetailsSkeleton(); }); + +// ----------------------------------------------------------------------------- +function hideDeviceDetailsSkeleton() { + $('#device-details-skeleton').fadeOut(250, function() { $(this).remove(); }); +} + +// Fallback: remove main skeleton and all tab pane skeletons if init stalls +setTimeout(function() { + hideDeviceDetailsSkeleton(); + if (typeof hideDetailsTabSkeleton === 'function') hideDetailsTabSkeleton(); + if (typeof hideSessionsTabSkeleton === 'function') hideSessionsTabSkeleton(); + if (typeof hidePresenceTabSkeleton === 'function') hidePresenceTabSkeleton(); + if (typeof hideEventsTabSkeleton === 'function') hideEventsTabSkeleton(); +}, 15000); } diff --git a/front/deviceDetailsEdit.php b/front/deviceDetailsEdit.php index 6c70ac4b..0bcfc8ee 100755 --- a/front/deviceDetailsEdit.php +++ b/front/deviceDetailsEdit.php @@ -3,6 +3,7 @@ // check if authenticated require_once $_SERVER["DOCUMENT_ROOT"] . "/php/templates/security.php"; ?> +
@@ -375,6 +376,7 @@ function getDeviceData() { initHoverNodeInfo(); hideSpinner(); + hideDetailsTabSkeleton(); }}); // $.get callback }, 100); // setTimeout @@ -665,4 +667,9 @@ function toggleFieldLock(mac, fieldName) { }); } +// ----------------------------------------------------------------------------- +function hideDetailsTabSkeleton() { + $('#skel-tab-details').fadeOut(250, function() { $(this).remove(); }); +} + diff --git a/front/deviceDetailsEvents.php b/front/deviceDetailsEvents.php index e747b1c1..184e2d32 100755 --- a/front/deviceDetailsEvents.php +++ b/front/deviceDetailsEvents.php @@ -5,6 +5,7 @@ ?> +
@@ -103,10 +104,12 @@ function loadEventsData() { table.draw(); hideSpinner(); + hideEventsTabSkeleton(); }, error: function (xhr) { console.error("Failed to load events", xhr.responseText); hideSpinner(); + hideEventsTabSkeleton(); } }); } @@ -198,5 +201,9 @@ function deviceEventsPageUpdater() { deviceEventsPageUpdater(); +// ----------------------------------------------------------------------------- +function hideEventsTabSkeleton() { + $('#skel-tab-events').fadeOut(250, function() { $(this).remove(); }); +} \ No newline at end of file diff --git a/front/deviceDetailsPresence.php b/front/deviceDetailsPresence.php index 7c4833f2..70f0e1f8 100755 --- a/front/deviceDetailsPresence.php +++ b/front/deviceDetailsPresence.php @@ -5,8 +5,11 @@ ?> + + + @@ -63,6 +66,7 @@ console.warn("Presence calendar API error:", response); callback([]); } + hidePresenceTabSkeleton(); }, error: function(xhr) { console.error( @@ -71,6 +75,7 @@ xhr.responseText ); callback([]); + hidePresenceTabSkeleton(); } }); }); @@ -205,6 +210,10 @@ function devicePresencePageUpdater() { devicePresencePageUpdater(); +// ----------------------------------------------------------------------------- +function hidePresenceTabSkeleton() { + $('#skel-tab-presence').fadeOut(250, function() { $(this).remove(); }); +} \ No newline at end of file diff --git a/front/deviceDetailsSessions.php b/front/deviceDetailsSessions.php index 0d8c7664..856f6e9b 100755 --- a/front/deviceDetailsSessions.php +++ b/front/deviceDetailsSessions.php @@ -6,6 +6,7 @@ + @@ -130,10 +131,12 @@ function loadSessionsData() { table.draw(); hideSpinner(); + hideSessionsTabSkeleton(); }, error: function (xhr, status, err) { console.error("Failed to load sessions:", err, xhr.responseText); hideSpinner(); + hideSessionsTabSkeleton(); } }); } @@ -174,4 +177,9 @@ function deviceSessionsPageUpdater() { // start updater deviceSessionsPageUpdater(); +// ----------------------------------------------------------------------------- +function hideSessionsTabSkeleton() { + $('#skel-tab-sessions').fadeOut(250, function() { $(this).remove(); }); +} + \ No newline at end of file diff --git a/front/devices.php b/front/devices.php index 6d1f1cfb..784c781f 100755 --- a/front/devices.php +++ b/front/devices.php @@ -37,7 +37,9 @@ -
+
+ +
@@ -181,6 +183,14 @@ callAfterAppInitialized(main) showSpinner(); +// ----------------------------------------------------------------------------- +function hideDevicesSkeleton() { + $('#devices-skeleton').fadeOut(250, function() { $(this).remove(); }); +} + +// Fallback: ensure skeleton is removed even if DataTable fails to initialize +setTimeout(hideDevicesSkeleton, 15000); + // ----------------------------------------------------------------------------- function main () { @@ -1123,6 +1133,7 @@ function initializeDatatable (status) { initHoverNodeInfo(); hideSpinner(); + hideDevicesSkeleton(); }, createdRow: function(row, data, dataIndex) { diff --git a/front/events.php b/front/events.php index f31c988f..e6a2fe1d 100755 --- a/front/events.php +++ b/front/events.php @@ -6,7 +6,8 @@ require 'php/templates/header.php'; showSpinner(); // Show initial page loading spinner -
+
+
@@ -154,11 +155,13 @@ function initializeDatatable() { recordsFiltered: response.recordsFiltered || 0 }); hideSpinner(); + hideEventsSkeleton(); }, error: function (xhr, status, error) { console.error("Error fetching session events:", status, error, xhr.responseText); callback({ data: [], recordsTotal: 0, recordsFiltered: 0 }); hideSpinner(); + hideEventsSkeleton(); } }); }, @@ -253,4 +256,12 @@ function getEvents(type) { showSpinner(); table.ajax.reload(null, true); // reset to page 1 } + +function hideEventsSkeleton() { + $('#events-skeleton').fadeOut(250, function () { $(this).remove(); }); +} + +window.onload = function () { + setTimeout(hideEventsSkeleton, 15000); +}; diff --git a/front/maintenance.php b/front/maintenance.php index f707acf5..d401ecf8 100755 --- a/front/maintenance.php +++ b/front/maintenance.php @@ -1,6 +1,5 @@ @@ -146,6 +145,7 @@ $db->close();
+
@@ -200,6 +200,7 @@ $db->close();
+
@@ -241,6 +242,7 @@ $db->close();
+
@@ -273,6 +275,7 @@ $db->close();
+
hideSpinner(), 50); + setTimeout(() => { + hideSpinner(); + }, 50); } //------------------------------------------------------------------------------ @@ -836,6 +841,7 @@ function renderLogs(customData) { // data: { items: JSON.stringify(customData) }, // Send customData as JSON success: function(response) { $('#logsPlc').html(response); // Replace container content with fetched HTML + hideMaintLoggingSkeleton(); applyFilter(); @@ -847,6 +853,7 @@ function renderLogs(customData) { }, error: function(xhr, status, error) { console.error('Error fetching infoboxes:', error); + hideMaintLoggingSkeleton(); } }); } @@ -870,6 +877,23 @@ window.onload = function asyncFooter() { + + diff --git a/front/network.php b/front/network.php index eb57afd5..7cf2dfeb 100755 --- a/front/network.php +++ b/front/network.php @@ -1,6 +1,5 @@ diff --git a/front/php/templates/footer.php b/front/php/templates/footer.php index d242cfe5..dc699877 100755 --- a/front/php/templates/footer.php +++ b/front/php/templates/footer.php @@ -43,6 +43,9 @@
+ + + diff --git a/front/php/templates/migrationCheck.php b/front/php/templates/migrationCheck.php index 8890df74..8cb3fd9a 100755 --- a/front/php/templates/migrationCheck.php +++ b/front/php/templates/migrationCheck.php @@ -1,6 +1,4 @@ +
+ + +
+
+
+
+
+ + + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ diff --git a/front/php/templates/skel_devices.php b/front/php/templates/skel_devices.php new file mode 100644 index 00000000..51058cac --- /dev/null +++ b/front/php/templates/skel_devices.php @@ -0,0 +1,301 @@ + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+ + +
+
+
+
+
+ + + +
+
+
+ + +
+ + +
+ + +
+ + + + + + +
+ + +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+
+
+ + +
+ diff --git a/front/php/templates/skel_events.php b/front/php/templates/skel_events.php new file mode 100644 index 00000000..a5f90ef4 --- /dev/null +++ b/front/php/templates/skel_events.php @@ -0,0 +1,44 @@ +
+ + +
+ +
+
+
+ + +
+
+ +
+
+
+ +
+ + +
+
+
+
+ + +
+
+ + + +
+ +
+ + + +
+ +
+
+
+ +
diff --git a/front/php/templates/skel_notifications.php b/front/php/templates/skel_notifications.php new file mode 100644 index 00000000..8315ebf2 --- /dev/null +++ b/front/php/templates/skel_notifications.php @@ -0,0 +1,19 @@ +
+
+
+ +
+
+ + + +
+ +
+ + + +
+ +
+
diff --git a/front/php/templates/skel_plugins.php b/front/php/templates/skel_plugins.php new file mode 100644 index 00000000..6da4a974 --- /dev/null +++ b/front/php/templates/skel_plugins.php @@ -0,0 +1,42 @@ +
+
+ + +
+ +
+ +
+ +
+ + +
+ +
+ + + +
+ +
+
+ + + +
+ +
+ + + +
+ +
+
+ +
+
diff --git a/front/php/templates/skel_presence.php b/front/php/templates/skel_presence.php new file mode 100644 index 00000000..69821f95 --- /dev/null +++ b/front/php/templates/skel_presence.php @@ -0,0 +1,45 @@ +
+ + +
+ +
+
+
+ + +
+
+ +
+
+
+ +
+ + +
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ +
diff --git a/front/php/templates/skel_report.php b/front/php/templates/skel_report.php new file mode 100644 index 00000000..fa6748c2 --- /dev/null +++ b/front/php/templates/skel_report.php @@ -0,0 +1,23 @@ +
+
+
+ +
+ + +
+ + + + + +
+ + +
+ + + +
+
+
diff --git a/front/php/templates/settings_skeleton.php b/front/php/templates/skel_settings.php similarity index 100% rename from front/php/templates/settings_skeleton.php rename to front/php/templates/skel_settings.php diff --git a/front/php/templates/skel_tab_details.php b/front/php/templates/skel_tab_details.php new file mode 100644 index 00000000..0067c7e4 --- /dev/null +++ b/front/php/templates/skel_tab_details.php @@ -0,0 +1,42 @@ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ diff --git a/front/php/templates/skel_tab_events.php b/front/php/templates/skel_tab_events.php new file mode 100644 index 00000000..667049b0 --- /dev/null +++ b/front/php/templates/skel_tab_events.php @@ -0,0 +1,75 @@ + +
+ +
+ + +
+ +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ diff --git a/front/php/templates/skel_tab_maint_backup.php b/front/php/templates/skel_tab_maint_backup.php new file mode 100644 index 00000000..83044e56 --- /dev/null +++ b/front/php/templates/skel_tab_maint_backup.php @@ -0,0 +1,11 @@ +
+ +
+ + +
+ +
diff --git a/front/php/templates/skel_tab_maint_dbtools.php b/front/php/templates/skel_tab_maint_dbtools.php new file mode 100644 index 00000000..7072bfa4 --- /dev/null +++ b/front/php/templates/skel_tab_maint_dbtools.php @@ -0,0 +1,11 @@ +
+ +
+ + +
+ +
diff --git a/front/php/templates/skel_tab_maint_logging.php b/front/php/templates/skel_tab_maint_logging.php new file mode 100644 index 00000000..74ce9a6f --- /dev/null +++ b/front/php/templates/skel_tab_maint_logging.php @@ -0,0 +1,10 @@ +
+ +
+ + + +
+ + +
diff --git a/front/php/templates/skel_tab_maint_multiedit.php b/front/php/templates/skel_tab_maint_multiedit.php new file mode 100644 index 00000000..d9caa923 --- /dev/null +++ b/front/php/templates/skel_tab_maint_multiedit.php @@ -0,0 +1,8 @@ +
+ +
+ + +
+ +
diff --git a/front/php/templates/skel_tab_presence.php b/front/php/templates/skel_tab_presence.php new file mode 100644 index 00000000..c403b47d --- /dev/null +++ b/front/php/templates/skel_tab_presence.php @@ -0,0 +1,12 @@ + +
+
+
+ + + +
+
+
+
+ diff --git a/front/php/templates/skel_tab_sessions.php b/front/php/templates/skel_tab_sessions.php new file mode 100644 index 00000000..80cedbf6 --- /dev/null +++ b/front/php/templates/skel_tab_sessions.php @@ -0,0 +1,78 @@ + +
+
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+
+ diff --git a/front/php/templates/skel_tab_sysinfo_initcheck.php b/front/php/templates/skel_tab_sysinfo_initcheck.php new file mode 100644 index 00000000..4c8656d3 --- /dev/null +++ b/front/php/templates/skel_tab_sysinfo_initcheck.php @@ -0,0 +1,12 @@ +
+ +
+ +
+ +
+ + + +
+
diff --git a/front/php/templates/skel_tab_sysinfo_network.php b/front/php/templates/skel_tab_sysinfo_network.php new file mode 100644 index 00000000..06ee49f4 --- /dev/null +++ b/front/php/templates/skel_tab_sysinfo_network.php @@ -0,0 +1,8 @@ +
+ +
+ + +
+ +
diff --git a/front/php/templates/skel_tab_sysinfo_server.php b/front/php/templates/skel_tab_sysinfo_server.php new file mode 100644 index 00000000..9422a79f --- /dev/null +++ b/front/php/templates/skel_tab_sysinfo_server.php @@ -0,0 +1,8 @@ +
+ +
+ + +
+ +
diff --git a/front/php/templates/skel_tab_sysinfo_storage.php b/front/php/templates/skel_tab_sysinfo_storage.php new file mode 100644 index 00000000..8f0f1a24 --- /dev/null +++ b/front/php/templates/skel_tab_sysinfo_storage.php @@ -0,0 +1,14 @@ +
+
+ + + +
+ +
+ + + +
+ +
diff --git a/front/php/templates/skel_workflows.php b/front/php/templates/skel_workflows.php new file mode 100644 index 00000000..23a72188 --- /dev/null +++ b/front/php/templates/skel_workflows.php @@ -0,0 +1,12 @@ +
+ +
+
+ + + + +
+
+ +
diff --git a/front/plugins.php b/front/plugins.php index 0cae73c8..df7df83d 100755 --- a/front/plugins.php +++ b/front/plugins.php @@ -1,12 +1,12 @@ -
+
+ diff --git a/front/pluginsCore.php b/front/pluginsCore.php index e2b6e0ea..9507e95e 100755 --- a/front/pluginsCore.php +++ b/front/pluginsCore.php @@ -516,6 +516,7 @@ function generateTabs() { if (visiblePlugins.length === 0) { $('#tabs-content-location').html(`

${getString('Gen_No_Data')}

`); hideSpinner(); + hidePluginsSkeleton(); return; } @@ -534,6 +535,7 @@ function generateTabs() { } hideSpinner() + hidePluginsSkeleton() } function resetTabs() { @@ -858,4 +860,12 @@ else initFields(); } +function hidePluginsSkeleton() { + $('#plugins-skeleton').fadeOut(250, function() { $(this).remove(); }); +} + +window.addEventListener('load', function() { + setTimeout(hidePluginsSkeleton, 15000); +}); + diff --git a/front/presence.php b/front/presence.php index 98698947..08709ebc 100755 --- a/front/presence.php +++ b/front/presence.php @@ -21,7 +21,8 @@ -
+
+
@@ -344,6 +345,7 @@ function initializeCalendar () { showSpinner(); } else { hideSpinner(); + hidePresenceSkeleton(); } } @@ -507,6 +509,12 @@ function getDevicesPresence (status) { }); }; +function hidePresenceSkeleton() { + $('#presence-skeleton').fadeOut(250, function() { $(this).remove(); }); +} +window.addEventListener('load', function() { + setTimeout(hidePresenceSkeleton, 15000); +}); diff --git a/front/report.php b/front/report.php index 33afb736..1a1ce4fb 100755 --- a/front/report.php +++ b/front/report.php @@ -1,7 +1,6 @@ @@ -10,7 +9,8 @@ -
+
+ @@ -126,6 +126,7 @@ }) .finally(() => { hideSpinner(); // always called, even if error occurred + hideReportSkeleton(); }); } @@ -183,6 +184,14 @@ + diff --git a/front/settings.php b/front/settings.php index 8efb3515..03d3e291 100755 --- a/front/settings.php +++ b/front/settings.php @@ -69,7 +69,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
- + diff --git a/front/systeminfo.php b/front/systeminfo.php index b6e2aaf2..b468a5bd 100755 --- a/front/systeminfo.php +++ b/front/systeminfo.php @@ -13,7 +13,6 @@ require 'php/templates/header.php'; ?> - @@ -70,16 +69,16 @@
- +
- +
- +
- +
diff --git a/front/userNotifications.php b/front/userNotifications.php index 87624ed5..b5f146fa 100755 --- a/front/userNotifications.php +++ b/front/userNotifications.php @@ -14,6 +14,7 @@ require 'php/templates/header.php';
+
@@ -168,6 +169,7 @@ require 'php/templates/header.php'; , initComplete: function(settings, json) { hideSpinner(); // Called after the DataTable is fully initialized + hideNotificationsSkeleton(); }}); fetchData(function(data) { @@ -215,6 +217,14 @@ require 'php/templates/header.php'; }); +function hideNotificationsSkeleton() { + $('#notifications-skeleton').fadeOut(250, function () { $(this).remove(); }); +} + +window.onload = function () { + setTimeout(hideNotificationsSkeleton, 15000); +}; +
+ \ No newline at end of file