From 00fb17d9e753462a7acf6a34281a50194b94db20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Eikeland?=
 <43904393+eikeland@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:52:59 +0100
Subject: [PATCH] fix(cli): apploader only emits the latest result to prevent
 doubble loading app (#2606)

---
 .changeset/thin-baboons-doubt.md              | 12 ++++
 packages/cli/src/bin/dev-portal/AppLoader.tsx | 72 ++++++++++---------
 2 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/thin-baboons-doubt.md

diff --git a/.changeset/thin-baboons-doubt.md b/.changeset/thin-baboons-doubt.md
new file mode 100644
index 000000000..069d378a0
--- /dev/null
+++ b/.changeset/thin-baboons-doubt.md
@@ -0,0 +1,12 @@
+---
+'@equinor/fusion-framework-cli': patch
+---
+
+### Modified Files
+
+`AppLoader.tsx`
+
+### Changes
+
+- Added import for last operator from rxjs/operators.
+- Updated the initialize subscription to use the last operator.
diff --git a/packages/cli/src/bin/dev-portal/AppLoader.tsx b/packages/cli/src/bin/dev-portal/AppLoader.tsx
index b8c4216df..76b9d79ef 100644
--- a/packages/cli/src/bin/dev-portal/AppLoader.tsx
+++ b/packages/cli/src/bin/dev-portal/AppLoader.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Subscription } from 'rxjs';
+import { last } from 'rxjs/operators';
 
 import { useFramework } from '@equinor/fusion-framework-react';
 
@@ -52,39 +53,44 @@ export const AppLoader = (props: { readonly appKey: string }) => {
 
         /** make sure that initialize is canceled and disposed if current app changes  */
         subscription.add(
-            currentApp?.initialize().subscribe({
-                next: ({ manifest, script, config }) => {
-                    /** generate basename for application */
-                    const [basename] = window.location.pathname.match(
-                        /\/?apps\/[a-z|-]+(\/)?/g,
-                    ) ?? [''];
-
-                    /** create a 'private' element for the application */
-                    const el = document.createElement('div');
-                    if (!ref.current) {
-                        throw Error('Missing application mounting point');
-                    }
-
-                    ref.current.appendChild(el);
-
-                    /** extract render callback function from javascript module */
-                    const render = script.renderApp ?? script.default;
-
-                    /** add application teardown to current render effect teardown */
-                    subscription.add(render(el, { fusion, env: { basename, config, manifest } }));
-
-                    /** remove app element when application unmounts */
-                    subscription.add(() => el.remove());
-                },
-                complete: () => {
-                    /** flag that application is no longer loading */
-                    setLoading(false);
-                },
-                error: (err) => {
-                    /** set error if initialization of application fails */
-                    setError(err);
-                },
-            }),
+            currentApp
+                ?.initialize()
+                .pipe(last())
+                .subscribe({
+                    next: ({ manifest, script, config }) => {
+                        /** generate basename for application */
+                        const [basename] = window.location.pathname.match(
+                            /\/?apps\/[a-z|-]+(\/)?/g,
+                        ) ?? [''];
+
+                        /** create a 'private' element for the application */
+                        const el = document.createElement('div');
+                        if (!ref.current) {
+                            throw Error('Missing application mounting point');
+                        }
+
+                        ref.current.appendChild(el);
+
+                        /** extract render callback function from javascript module */
+                        const render = script.renderApp ?? script.default;
+
+                        /** add application teardown to current render effect teardown */
+                        subscription.add(
+                            render(el, { fusion, env: { basename, config, manifest } }),
+                        );
+
+                        /** remove app element when application unmounts */
+                        subscription.add(() => el.remove());
+                    },
+                    complete: () => {
+                        /** flag that application is no longer loading */
+                        setLoading(false);
+                    },
+                    error: (err) => {
+                        /** set error if initialization of application fails */
+                        setError(err);
+                    },
+                }),
         );
 
         /** teardown application when hook unmounts */