refactor: updates react js and ts examples

Author: sashamilenkovic

frameworks/react/JS/src/pages/BasicViewerPage.jsx

@@ -18,8 +18,6 @@ function BasicViewerPage() {
       nutrientViewer = await loadNutrientViewer();
 
       if (container && nutrientViewer) {
-        unloadBasicViewer(nutrientViewer, container);
-
         loadBasicViewer(nutrientViewer, container);
       }
     })();

frameworks/react/JS/src/pages/CustomOverlaysPage.jsx

@@ -14,15 +14,17 @@ function CustomOverlaysPage() {
 
     if (!container) return;
 
-    let nutrientViewer;
+    let nutrientViewer = null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      loadCustomOverlaysViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+      if (container && nutrientViewer) {
+        unloadCustomOverlaysViewer(nutrientViewer, container);
+
+        loadCustomOverlaysViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {

frameworks/react/JS/src/pages/MagazineModePage.jsx

@@ -10,15 +10,24 @@ function MagazineModePage() {
 
   useEffect(() => {
     const container = containerRef.current;
-    const { NutrientViewer } = window;
 
-    if (container && NutrientViewer) {
-      loadMagazineViewer(NutrientViewer, container);
-    }
+    if (!container) return;
+
+    let nutrientViewer = null;
+
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
+
+      if (container && nutrientViewer) {
+        unloadMagazineViewer(nutrientViewer, container);
+
+        loadMagazineViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
-      if (NutrientViewer) {
-        unloadMagazineViewer(NutrientViewer, container);
+      if (nutrientViewer && container) {
+        unloadMagazineViewer(nutrientViewer, container);
       }
     };
   }, []);

frameworks/react/TS/src/pages/BasicViewerPage.tsx

@@ -15,15 +15,18 @@ function BasicViewerPage() {
 
     if (!container) return;
 
-    let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
+    let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+      null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      loadBasicViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+      if (container && nutrientViewer) {
+        unloadBasicViewer(nutrientViewer, container);
+
+        loadBasicViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {

frameworks/react/TS/src/pages/CustomOverlaysPage.tsx

@@ -14,15 +14,18 @@ function CustomOverlaysPage() {
 
     if (!container) return;
 
-    let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
+    let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+      null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      loadCustomOverlaysViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+      if (container && nutrientViewer) {
+        unloadCustomOverlaysViewer(nutrientViewer, container);
+
+        loadCustomOverlaysViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {

frameworks/react/TS/src/pages/MagazineModePage.tsx

@@ -14,15 +14,18 @@ function MagazineModePage() {
 
     if (!container) return;
 
-    let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
+    let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+      null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      loadMagazineViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+      if (container && nutrientViewer) {
+        unloadMagazineViewer(nutrientViewer, container);
+
+        loadMagazineViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {