opt: wait for ripple animation complete

module/webui/scripts/about.js

@@ -7,12 +7,14 @@ document.getElementById("about").addEventListener("click", () => {
     const closeAbout = document.getElementById('close-about');
 
     // Show about menu
-    document.body.classList.add("no-scroll");
-    aboutOverlay.style.display = 'flex';
     setTimeout(() => {
-        aboutOverlay.style.opacity = '1';
-        aboutContent.classList.add('open');
-    }, 10);
+        document.body.classList.add("no-scroll");
+        aboutOverlay.style.display = 'flex';
+        setTimeout(() => {
+            aboutOverlay.style.opacity = '1';
+            aboutContent.classList.add('open');
+        }, 10);
+    }, 80);
 
     const hideMenu = () => {
         document.body.classList.remove("no-scroll");

module/webui/scripts/menu_option.js

@@ -82,7 +82,7 @@ document.getElementById("deselect-unnecessary").addEventListener("click", async
 
 // Function to add system app
 export async function setupSystemAppMenu() {
-    document.getElementById("add-system-app").addEventListener("click", () => openSystemAppOverlay());
+    document.getElementById("add-system-app").addEventListener("click", () => setTimeout(() => openSystemAppOverlay(), 80));
     document.getElementById("add-system-app-overlay").addEventListener("click", (event) => {
         if (event.target === event.currentTarget) closeSystemAppOverlay();
     });
@@ -389,17 +389,13 @@ document.querySelector('.back-button').addEventListener('click', async () => {
 });
 
 // Close custom keybox selector
-document.querySelector('.close-selector').addEventListener('click', () => {
-    closeCustomKeyboxSelector();
-});
+document.querySelector('.close-selector').addEventListener('click', () => closeCustomKeyboxSelector());
 fileSelector.addEventListener('click', (event) => {
-    if (event.target === fileSelector) {
-        closeCustomKeyboxSelector();
-    }
+    if (event.target === fileSelector) closeCustomKeyboxSelector();
 });
 
-// Function to close custom keybox selector
-function closeCustomKeyboxSelector() {
+// close custom keybox selector
+const closeCustomKeyboxSelector = () => {
     fileSelector.style.opacity = '0';
     fileSelectorContent.classList.remove('open');
     document.body.classList.remove("no-scroll");
@@ -410,6 +406,7 @@ function closeCustomKeyboxSelector() {
 
 // Open custom keybox selector
 document.getElementById('customkb').addEventListener('click', async () => {
+    await new Promise(resolve => setTimeout(resolve, 80));
     fileSelector.style.display = 'flex';
     document.body.classList.add("no-scroll");
     setTimeout(() => {

module/webui/scripts/security_patch.js

@@ -13,19 +13,8 @@ const getButton = document.getElementById('get-patch');
 const autoButton = document.getElementById('auto-config');
 const saveButton = document.getElementById('save-patch');
 
-// Show security patch dialog
-function showSecurityPatchDialog() {
-    document.body.classList.add("no-scroll");
-    overlay.style.display = 'flex';
-    setTimeout(() => {
-        overlay.style.opacity = '1';
-        overlayContent.classList.add('open');
-        loadCurrentConfig();
-    }, 10);
-}
-
 // Hide security patch dialog
-function hideSecurityPatchDialog() {
+const hideSecurityPatchDialog = () => {
     document.body.classList.remove("no-scroll");
     overlay.style.opacity = '0';
     overlayContent.classList.remove('open');
@@ -207,7 +196,17 @@ function isValid8Digit(value) {
 
 // Initialize event listeners
 export function securityPatch() {
-    document.getElementById("security-patch").addEventListener("click", showSecurityPatchDialog);
+    document.getElementById("security-patch").addEventListener("click", () => {
+        setTimeout(() => {
+            document.body.classList.add("no-scroll");
+            overlay.style.display = 'flex';
+            setTimeout(() => {
+                overlay.style.opacity = '1';
+                overlayContent.classList.add('open');
+                loadCurrentConfig();
+            }, 10);
+        }, 80);
+    });
 
     // Toggle advanced mode
     advancedToggle.addEventListener('change', () => {