fix: Improve lazy loading and error handling in select component

Summary of changes
- Enhanced the initialization of total text tracking with `initTotal.call(self)` directly in the fetching process, ensuring that the total is always accurately represented after fetching.
- Switched the order of `setTotalText.call(this)` and `setStatusOrRemoveBadges.call(this, "closed")` to minimize UI flickering and improve the user experience during option updates.
- Modified error messages for better clarity by rephrasing the HTTP error message in the `initTotal` function, providing clearer feedback in case of fetch failures.

These changes were made to tidy up the loading and error reporting mechanisms of the select component, enhancing the overall reliability and responsiveness of the user interface. No one likes unnecessary confusion, so let's keep things clear and efficient!

source/components/form/select.mjs

@@ -561,6 +561,8 @@ class Select extends CustomControl {
         let lazyLoadFlag = self.getOption("features.lazyLoad", false);
         const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
 
+        initTotal.call(self);
+
         if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
             self.setOption("features.lazyLoad", false);
             lazyLoadFlag = false;
@@ -585,16 +587,13 @@ class Select extends CustomControl {
                 lookupSelection.call(self);
             } else {
                 self.fetch().then(() => {
-                    setTotalText.call(self);
+
                 }).catch((e) => {
                     addErrorAttribute(self, e);
                 });
             }
         }
 
-        initTotal.call(self);
-
-
         setTimeout(() => {
             let lastValue = self.value;
             self[internalSymbol].attachObserver(
@@ -1408,9 +1407,9 @@ function fetchIt(url, controlOptions) {
 
                         queueMicrotask(() => {
                             checkOptionState.call(this);
-                            setStatusOrRemoveBadges.call(this, "closed");
-                            updatePopper.call(this);
                             setTotalText.call(this);
+                            updatePopper.call(this);
+                            setStatusOrRemoveBadges.call(this, "closed");
 
                             resolve(result);
                         });
@@ -1714,6 +1713,9 @@ function getDefaultTranslation() {
     return translation;
 }
 
+/**
+ * @private
+ */
 function setTotalText() {
 
     if (getFilterMode.call(this) !== FILTER_MODE_REMOTE) {
@@ -2869,6 +2871,8 @@ function show() {
         return;
     }
 
+    setTotalText.call(this);
+
     focusFilter.call(this);
 
     const lazyLoadFlag =
@@ -2943,7 +2947,7 @@ function initDefaultOptionsFromUrl() {
             this[cleanupOptionsListSymbol] = false;
             importOptionsIntern.call(this, data);
             setStatusOrRemoveBadges.call(this, "open");
-            setTotal.call(this, data)
+            initTotal.call(this, data)
         })
         .catch((e) => {
             addErrorAttribute(this, e);
@@ -2969,7 +2973,7 @@ function initTotal() {
 
     getGlobal().fetch(url).then((response) => {
         if (!response.ok) { // Improved status checking using `response.ok`
-            addErrorAttribute(this, `HTTP error! status: ${response.status} - ${response.statusText}`);
+            addErrorAttribute(this, `HTTP error status: ${response.status} - ${response.statusText}`);
             return;
         }
 
@@ -3292,7 +3296,6 @@ function setStatusOrRemoveBadges(suggestion) {
             if (current !== suggestion) {
                 this.setOption("classes.statusOrRemoveBadge", suggestion);
             }
-            return;
         }
     });
 }