From 9a37d82f20efd61281183c78c494b8112d445979 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Tue, 14 Jan 2025 21:44:01 +0200
Subject: [PATCH] refactor: optimize species settings initialization in HTML
 templates

- Replaced direct assignment of species data with asynchronous initialization methods for `allSpecies` and `filteredSpecies`.
- Updated `x-init` to call the new `init` function, ensuring data is loaded correctly before usage.
- This change improves the loading process and maintains the reactivity of the species settings component.
---
 views/settings/speciesSettings.html | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index cc7b9d3..9140d6a 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -15,7 +15,10 @@
         showTooltip: null,
         hasChanges: false,
         predictions: [],
-        allSpecies: {{getAllSpecies | toJSON}},
+        allSpecies: [],
+        async init() {
+            this.allSpecies = {{getAllSpecies | toJSON}};
+        },
         speciesSettingsOpen: false,
         showActionsModal: false,
         currentSpecies: '',
@@ -50,7 +53,7 @@
                 .slice(0, 5);
         },
     }" 
-    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-init="init(); $watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
     x-cloak>
     
     <input type="checkbox" 
@@ -132,7 +135,10 @@
         showTooltip: null,
         hasChanges: false,
         predictions: [],
-        filteredSpecies: {{getIncludedSpecies | toJSON}},
+        filteredSpecies: [],
+        async init() {
+            this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+        },
         resetChanges() {
             this.hasChanges = false;
         },
@@ -164,7 +170,7 @@
                 .slice(0, 5);
         },
     }" 
-    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-init="init(); $watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
     x-cloak>
     
     <input type="checkbox" 
@@ -240,8 +246,12 @@
         showTooltip: null,
         hasChanges: false,
         predictions: [],
-        allSpecies: {{getAllSpecies | toJSON}},
-        filteredSpecies: {{getIncludedSpecies | toJSON}},
+        allSpecies: [],
+        filteredSpecies: [],
+        async init() {
+            this.allSpecies = {{getAllSpecies | toJSON}};
+            this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+        },
         speciesSettingsOpen: false,
         showActionsModal: false,
         currentSpecies: '',
@@ -334,7 +344,7 @@
                 .slice(0, 5);
         },
     }" 
-    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-init="init(); $watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
     x-cloak>
     
     <input type="checkbox"