From e1a53ef2d55c1b49f23a29b24e7b1055e0f5f4db Mon Sep 17 00:00:00 2001
From: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
Date: Thu, 24 Apr 2025 00:42:48 +0200
Subject: [PATCH] [refactor] Simplify module loading process (#3766)

While debugging a 3rd party module, I looked at how modules are loaded
and realized that the `loadModules` method can be implemented much
simpler. This refactor makes the method easier to understand and
maintain.
---
 CHANGELOG.md |  4 ++++
 js/loader.js | 33 +++++++++++++--------------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bde0b129..98ea0e69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 planned for 2025-07-01
 
+### Changed
+
+- [refactor] Simplify module loading process
+
 ## [2.31.0] - 2025-04-01
 
 Thanks to: @Developer-Incoming, @eltociear, @geraki, @khassel, @KristjanESPERANTO, @MagMar94, @mixasgr, @n8many, @OWL4C, @rejas, @savvadam, @sdetweil.
diff --git a/js/loader.js b/js/loader.js
index e823b0b6..d86ef932 100644
--- a/js/loader.js
+++ b/js/loader.js
@@ -217,29 +217,22 @@ const Loader = (function () {
 		 * Load all modules as defined in the config.
 		 */
 		async loadModules () {
-			let moduleData = await getModuleData();
+			const moduleData = await getModuleData();
 			const envVars = await getEnvVars();
 			const customCss = envVars.customCss;
 
-			/**
-			 * @returns {Promise<void>} when all modules are loaded
-			 */
-			const loadNextModule = async function () {
-				if (moduleData.length > 0) {
-					const nextModule = moduleData[0];
-					await loadModule(nextModule);
-					moduleData = moduleData.slice(1);
-					await loadNextModule();
-				} else {
-					// All modules loaded. Load custom.css
-					// This is done after all the modules so we can
-					// overwrite all the defined styles.
-					await loadFile(customCss);
-					// custom.css loaded. Start all modules.
-					await startModules();
-				}
-			};
-			await loadNextModule();
+			// Load all modules
+			for (const module of moduleData) {
+				await loadModule(module);
+			}
+
+			// Load custom.css
+			// Since this happens after loading the modules,
+			// it overwrites the default styles.
+			await loadFile(customCss);
+
+			// Start all modules.
+			await startModules();
 		},
 
 		/**