@nuskin/product-components 3.20.1 → 3.20.2

package/docs/CHANGELOG.md

@@ -1 +1 @@
-## [3.20.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.20.0...v3.20.1) (2026-04-22)
+## [3.20.2](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.20.1...v3.20.2) (2026-04-27)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/product-components",
-  "version": "3.20.1",
+  "version": "3.20.2",
   "description": "Nu Skin Product Components",
   "main": "index.js",
   "scripts": {

package/services/NsProductAppService.js

@@ -25,7 +25,7 @@ if (!NsProductAppService) {
       return {
         runConfig: {},
         runConfigInterval: null,
-        runConfigTries: 3,
+        runConfigTries: 10,
         locale: "",
         marketConfig: {},
         awsUrl: "",
@@ -34,7 +34,10 @@ if (!NsProductAppService) {
         showWholeSalePricing: false,
         loadingConfig: true,
         translations: {},
-        loadingTranslations: true
+        loadingTranslations: true,
+        configLoadedSuccessfully: false,
+        visibilityChangeTriggered: false,
+        pageShowTriggered: false
       };
     },
     computed: {
@@ -44,20 +47,86 @@ if (!NsProductAppService) {
     },
     async mounted() {
       await this.setConfig();
-      this.runConfigInterval = setInterval(async () => {
-        if (this.runConfigTries <= 0) {
-          clearInterval(this.runConfigInterval);
-          this.runConfigTries = 0;
-        } else {
-          await this.checkConfig();
-          this.runConfigTries--;
+      this.startConfigRetryInterval();
+
+      // Handle Instagram and other in-app browsers that load pages in hidden state
+      // Re-initialize when page becomes visible
+      this.handleVisibilityChange = async () => {
+        this.visibilityChangeTriggered = true;
+
+        const visibilityState =
+          typeof document !== "undefined" && document.visibilityState
+            ? document.visibilityState
+            : "visible";
+
+        if (visibilityState === "visible" && !this.configLoadedSuccessfully) {
+          await this.setConfig();
+          if (!this.configLoadedSuccessfully) {
+            this.startConfigRetryInterval();
+          }
+        }
+      };
+
+      if (typeof document !== "undefined") {
+        document.addEventListener(
+          "visibilitychange",
+          this.handleVisibilityChange
+        );
+      }
+
+      // Handle page restoration from bfcache (back/forward cache)
+      this.handlePageShow = async event => {
+        this.pageShowTriggered = true;
+        if (event.persisted && !this.configLoadedSuccessfully) {
+          await this.setConfig();
+          if (!this.configLoadedSuccessfully) {
+            this.startConfigRetryInterval();
+          }
         }
-      }, 350);
+      };
+
+      if (typeof window !== "undefined") {
+        window.addEventListener("pageshow", this.handlePageShow);
+      }
     },
     beforeDestroy() {
-      clearInterval(this.runConfigInterval);
+      this.clearConfigRetryInterval();
+      if (this.handleVisibilityChange && typeof document !== "undefined") {
+        document.removeEventListener(
+          "visibilitychange",
+          this.handleVisibilityChange
+        );
+      }
+      if (this.handlePageShow && typeof window !== "undefined") {
+        window.removeEventListener("pageshow", this.handlePageShow);
+      }
     },
     methods: {
+      /**
+       * Start the configuration retry interval
+       */
+      startConfigRetryInterval() {
+        this.clearConfigRetryInterval();
+        this.runConfigInterval = setInterval(async () => {
+          if (this.runConfigTries <= 0 || this.configLoadedSuccessfully) {
+            this.clearConfigRetryInterval();
+          } else {
+            await this.checkConfig();
+            this.runConfigTries--;
+          }
+        }, 350);
+      },
+
+      /**
+       * Clear the configuration retry interval
+       */
+      clearConfigRetryInterval() {
+        if (this.runConfigInterval) {
+          clearInterval(this.runConfigInterval);
+          this.runConfigInterval = null;
+        }
+      },
+
       /**
        * Gets the full content path for an image or content src
        */
@@ -89,6 +158,7 @@ if (!NsProductAppService) {
         runConfig = runConfig || RunConfigService.getRunConfig() || {};
         if (!runConfig.language || !runConfig.country) {
           // the runconfig isn't ready yet
+          this.loadingConfig = false;
           return;
         }
 
@@ -115,6 +185,11 @@ if (!NsProductAppService) {
         };
 
         this.loadingConfig = false;
+        this.configLoadedSuccessfully = true;
+
+        // Stop retry interval once config is successfully loaded
+        this.clearConfigRetryInterval();
+
         this.$emit("config-changed", configData);
       },