From 8cb466e7220967644bcdc91ee76798fdecbc05c9 Mon Sep 17 00:00:00 2001 From: "Jokob @NetAlertX" <96159884+jokob-sk@users.noreply.github.com> Date: Sat, 20 Jun 2026 00:40:01 +0000 Subject: [PATCH 1/5] feat: Implement settings loading skeleton and enhance UI elements --- front/css/app.css | 180 +++++++++++++++++++++- front/css/dark-patch.css | 13 ++ front/css/system-dark-patch.css | 15 +- front/js/common.js | 12 +- front/js/settings_utils.js | 2 +- front/php/templates/header.php | 2 +- front/php/templates/settings_skeleton.php | 106 +++++++++++++ front/settings.php | 34 ++-- 8 files changed, 338 insertions(+), 26 deletions(-) create mode 100644 front/php/templates/settings_skeleton.php diff --git a/front/css/app.css b/front/css/app.css index ef8f2ddf..e5ef9890 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1083,6 +1083,7 @@ height: 50px; .settingswrap { margin-bottom: 100px; + padding-top: 0px; } .settingswrap .metadata @@ -1178,8 +1179,10 @@ height: 50px; /* Settings */ #settingsPage .overview-setting-value{ - display:unset; - + display: block; + overflow: hidden; + text-overflow: ellipsis; + font-size: smaller; } .overview-setting-value-wrap @@ -1228,7 +1231,7 @@ height: 50px; } #settingsPage .panel-heading:hover{ - background-color: #272c30; + background-color: #e8e8e8; } .settings-expand-icon { @@ -2256,7 +2259,7 @@ textarea[readonly], ----------------------------------------------------------------------------- */ #loadingSpinner { position: fixed; - z-index: 1000; + z-index: 9999; /* top: 0; */ /* left: 0; */ /* width: 100%; */ @@ -2265,7 +2268,6 @@ textarea[readonly], transition: opacity 0.3s ease-in-out; pointer-events: none; display: block; - z-index: 800; } .fa-spinner @@ -2587,4 +2589,170 @@ table.dataTable tbody > tr.selected .input-group-addon.text-muted { color: #8c8c8c; background-color: rgba(140, 140, 140, 0.05); -} \ No newline at end of file +} + +/* ===== Settings Page Loading Skeleton ===== */ + +:root { + --skel-base: #e2e2e2; + --skel-shine: #f0f0f0; + --skel-section: #d4d4d4; + --skel-panel-bg: #f5f5f5; + --skel-border: #ddd; + --skel-bg: #ecf0f5; +} + +@keyframes settingsShimmer { + 0% { background-position: -600px 0; } + 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, + var(--skel-base) 25%, + var(--skel-shine) 50%, + var(--skel-base) 75% + ); + background-size: 600px 100%; + animation: settingsShimmer 1.5s infinite linear; + border-radius: 3px; + display: inline-block; +} + +/* Overview panel skeleton */ +.skel-overview-panel { + margin-bottom: 10px; + border-radius: 4px; + overflow: hidden; + 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; + 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; + 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 { + background: var(--skel-panel-bg); +} + +.skel-setting-row { + 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; +} + +/* Skeleton line / cell primitives */ +.skel-line { + height: 14px; + flex-shrink: 0; +} + +.skel-icon-block { + width: 22px; + height: 16px; + flex-shrink: 0; +} + +.skel-cell-name { + width: 20%; + height: 14px; + flex-shrink: 0; +} + +.skel-cell-desc { + width: 36%; + height: 14px; + flex-shrink: 0; +} + +.skel-cell-input { + flex: 1; + height: 32px; +} +/* ===== /Settings Page Loading Skeleton ===== */ \ No newline at end of file diff --git a/front/css/dark-patch.css b/front/css/dark-patch.css index dbda3801..9dcda157 100755 --- a/front/css/dark-patch.css +++ b/front/css/dark-patch.css @@ -516,6 +516,9 @@ textarea[readonly], border: 1px solid #353c42; color: #bec5cb; } +#settingsPage .panel-heading:hover { + background-color: #272c30; +} .box.box-solid.box-info, .box.box-solid.box-info > .box-header { color: #bec5cb; @@ -754,4 +757,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected font-family: 'Courier New', monospace; font-size: .85em; cursor: pointer; +} + +/* Settings skeleton - dark theme */ +:root { + --skel-base: #2e3540; + --skel-shine: #3d4555; + --skel-section: #252c38; + --skel-panel-bg: #1e242e; + --skel-border: #2a323e; + --skel-bg: #353c42; } \ No newline at end of file diff --git a/front/css/system-dark-patch.css b/front/css/system-dark-patch.css index 06121b02..74171a1e 100755 --- a/front/css/system-dark-patch.css +++ b/front/css/system-dark-patch.css @@ -512,6 +512,9 @@ border: 1px solid #353c42; color: #bec5cb; } + #settingsPage .panel-heading:hover { + background-color: #272c30; + } .box.box-solid.box-info, .box.box-solid.box-info > .box-header { color: #bec5cb; @@ -731,4 +734,14 @@ font-family: 'Courier New', monospace; font-size: .85em; cursor: pointer; -} \ No newline at end of file +} + + /* Settings skeleton - dark theme */ + :root { + --skel-base: #2e3540; + --skel-shine: #3d4555; + --skel-section: #252c38; + --skel-panel-bg: #1e242e; + --skel-border: #2a323e; + --skel-bg: #353c42; + } \ No newline at end of file diff --git a/front/js/common.js b/front/js/common.js index 3ae3803b..7c0762d3 100755 --- a/front/js/common.js +++ b/front/js/common.js @@ -957,8 +957,8 @@ let animationTime = 300 function showSpinner(stringKey = 'Loading') { let text = isEmpty(stringKey) ? "Loading..." : getString(stringKey || "Loading"); - if (text == ""){ - text = "Loading" + if (!text || !text.trim()) { + text = "Loading..." } const spinner = $("#loadingSpinner"); @@ -978,7 +978,7 @@ function showSpinner(stringKey = 'Loading') { left: offset.left, width: width, height: height, - zIndex: 800 + zIndex: 9999 }); } else { // Fullscreen fallback @@ -988,7 +988,7 @@ function showSpinner(stringKey = 'Loading') { left: 0, width: "100%", height: "100%", - zIndex: 800 + zIndex: 9999 }); } @@ -1018,7 +1018,7 @@ function hideSpinner() { left: offset.left, width: width, height: height, - zIndex: 800 + zIndex: 9999 }); } else { // Fullscreen fallback @@ -1028,7 +1028,7 @@ function hideSpinner() { left: 0, width: "100%", height: "100%", - zIndex: 800 + zIndex: 9999 }); } diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js index 6cb01e62..11b1a12b 100755 --- a/front/js/settings_utils.js +++ b/front/js/settings_utils.js @@ -99,7 +99,7 @@ function pluginCards(prefixesOfEnabledPlugins, includeSettings) { }); html += ` -
+
diff --git a/front/php/templates/header.php b/front/php/templates/header.php index 8060abe9..4faff4c8 100755 --- a/front/php/templates/header.php +++ b/front/php/templates/header.php @@ -151,7 +151,7 @@
diff --git a/front/php/templates/settings_skeleton.php b/front/php/templates/settings_skeleton.php new file mode 100644 index 00000000..6114a638 --- /dev/null +++ b/front/php/templates/settings_skeleton.php @@ -0,0 +1,106 @@ + +
+ + +
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+ diff --git a/front/settings.php b/front/settings.php index 5780de78..8efb3515 100755 --- a/front/settings.php +++ b/front/settings.php @@ -69,20 +69,17 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
- - - - - + +
-
+
-
+
">
@@ -284,7 +281,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX }, error: function (xhr, status, error) { console.error("Error:", error); - // Handle any errors + hideSettingsSkeleton(); } }); } @@ -328,7 +325,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX overviewSections.forEach((section) => { - overviewSections_html += `
+ const sectionHtml = overviewSectionsHtml[index]; + + if (sectionHtml.trim()) { + overviewSections_html += `
@@ -338,9 +338,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
- ${overviewSectionsHtml[index]} + ${sectionHtml}
` + } index++; }); @@ -535,9 +536,18 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX initSelect2(); initHoverNodeInfo(); hideSpinner(); + hideSettingsSkeleton(); } + // ---------------------------------------------------------------- + function hideSettingsSkeleton() { + var $skel = $('#settings-skeleton'); + if (!$skel.length) return; + $('#settingsPage').removeClass('settings-loading'); + $skel.fadeOut(250, function() { $(this).remove(); }); + } + // display the name of the first person // echo $settingsJson[0]->name; var settingsNumberDB = ; @@ -652,6 +662,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX { showMessage (getString("settings_readonly"), 10000, "modal_red"); console.log(`app.conf seems to be read only (canRWConfig: ${canReadAndWriteConfig})`); + hideSettingsSkeleton(); } else { // check if config file has been updated @@ -706,9 +717,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX } } - showSpinner() handleLoadingDialog() + // Fallback: hide skeleton after 15s in case of unexpected error + setTimeout(hideSettingsSkeleton, 15000) From cf8f3955d43d00487c6af0a193d666ba9c562782 Mon Sep 17 00:00:00 2001 From: "Jokob @NetAlertX" <96159884+jokob-sk@users.noreply.github.com> Date: Sat, 20 Jun 2026 10:09:37 +0000 Subject: [PATCH 2/5] fix: Update card layout in settings loading skeleton for improved responsiveness --- front/php/templates/settings_skeleton.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/front/php/templates/settings_skeleton.php b/front/php/templates/settings_skeleton.php index 6114a638..f230a689 100644 --- a/front/php/templates/settings_skeleton.php +++ b/front/php/templates/settings_skeleton.php @@ -8,18 +8,18 @@
-
-
-
+
+
+
-
-
-
+
+
+
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 3/5] 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 From 36a10fb9ef58ed4d8e8492d401f8c1893edf1ca4 Mon Sep 17 00:00:00 2001 From: "Jokob @NetAlertX" <96159884+jokob-sk@users.noreply.github.com> Date: Sat, 20 Jun 2026 11:53:20 +0000 Subject: [PATCH 4/5] lint --- front/appEvents.php | 6 +++--- front/php/templates/migrationCheck.php | 4 ++-- front/plugins.php | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/front/appEvents.php b/front/appEvents.php index cdbf33aa..4a894afc 100755 --- a/front/appEvents.php +++ b/front/appEvents.php @@ -1,9 +1,9 @@ - +
@@ -12,7 +12,7 @@ require 'appEventsCore.php'; ?> - +
@@ -10,7 +10,7 @@ - +
Date: Sat, 20 Jun 2026 12:08:48 +0000 Subject: [PATCH 5/5] fix: Replace window.onload with addEventListener for better event handling and hide spinner in skeleton functions --- front/events.php | 4 ++-- front/pluginsCore.php | 4 +++- front/presence.php | 1 + front/userNotifications.php | 4 ++-- front/workflowsCore.php | 1 + 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/front/events.php b/front/events.php index e6a2fe1d..72eac8e2 100755 --- a/front/events.php +++ b/front/events.php @@ -261,7 +261,7 @@ function hideEventsSkeleton() { $('#events-skeleton').fadeOut(250, function () { $(this).remove(); }); } -window.onload = function () { +window.addEventListener('load', function () { setTimeout(hideEventsSkeleton, 15000); -}; +}); diff --git a/front/pluginsCore.php b/front/pluginsCore.php index 9507e95e..cb65134c 100755 --- a/front/pluginsCore.php +++ b/front/pluginsCore.php @@ -294,6 +294,8 @@ async function getData() { generateTabs(); } catch (err) { console.error("Failed to load data", err); + hideSpinner(); + hidePluginsSkeleton(); } } @@ -865,7 +867,7 @@ function hidePluginsSkeleton() { } window.addEventListener('load', function() { - setTimeout(hidePluginsSkeleton, 15000); + setTimeout(function() { hidePluginsSkeleton(); hideSpinner(); }, 15000); }); diff --git a/front/presence.php b/front/presence.php index 08709ebc..9646de85 100755 --- a/front/presence.php +++ b/front/presence.php @@ -510,6 +510,7 @@ function getDevicesPresence (status) { }; function hidePresenceSkeleton() { + hideSpinner(); $('#presence-skeleton').fadeOut(250, function() { $(this).remove(); }); } diff --git a/front/userNotifications.php b/front/userNotifications.php index b5f146fa..1fa81314 100755 --- a/front/userNotifications.php +++ b/front/userNotifications.php @@ -221,9 +221,9 @@ function hideNotificationsSkeleton() { $('#notifications-skeleton').fadeOut(250, function () { $(this).remove(); }); } -window.onload = function () { +window.addEventListener('load', function () { setTimeout(hideNotificationsSkeleton, 15000); -}; +}); diff --git a/front/workflowsCore.php b/front/workflowsCore.php index 4437349a..f1940591 100755 --- a/front/workflowsCore.php +++ b/front/workflowsCore.php @@ -1378,6 +1378,7 @@ $(document).ready(function () { }); function hideWorkflowsSkeleton() { + hideSpinner(); $('#workflows-skeleton').fadeOut(250, function() { $(this).remove(); }); }