From 21b94e248869a05bee230cfbcc077d65b6b8a210 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Thu, 6 Nov 2025 14:55:06 +0000 Subject: [PATCH 1/4] allow host page to force web component into a loading state while it loads necessary data --- src/containers/WebComponentLoader.jsx | 3 ++- src/web-component.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx index c0a63fb64..5fe46cfaf 100644 --- a/src/containers/WebComponentLoader.jsx +++ b/src/containers/WebComponentLoader.jsx @@ -41,6 +41,7 @@ const WebComponentLoader = (props) => { hostStyles, // Pass in styles from the host identifier, instructions, + isLoading, theme, loadRemixDisabled = false, locale = "en", @@ -251,7 +252,7 @@ const WebComponentLoader = (props) => { ); - if (loading === "success") { + if (!isLoading && loading === "success") { return renderSuccessState(); } else if (["idle", "failed"].includes(loading)) { return renderFailedState(); diff --git a/src/web-component.js b/src/web-component.js index 345502510..cbdd6dbdd 100644 --- a/src/web-component.js +++ b/src/web-component.js @@ -57,6 +57,7 @@ class WebComponent extends HTMLElement { "host_styles", "identifier", "instructions", + "is_loading", "load_remix_disabled", "locale", "output_only", @@ -83,6 +84,7 @@ class WebComponent extends HTMLElement { [ "embedded", "editable_instructions", + "is_loading", "load_remix_disabled", "output_only", "output_split_view", From d335712bde6a80a25482a55a76dbb583d1f5a9c3 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Thu, 6 Nov 2025 15:24:54 +0000 Subject: [PATCH 2/4] tweaking and testing --- src/containers/WebComponentLoader.jsx | 6 ++-- src/containers/WebComponentLoader.test.js | 38 ++++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx index 5fe46cfaf..22df5d049 100644 --- a/src/containers/WebComponentLoader.jsx +++ b/src/containers/WebComponentLoader.jsx @@ -41,7 +41,7 @@ const WebComponentLoader = (props) => { hostStyles, // Pass in styles from the host identifier, instructions, - isLoading, + isLoading = false, theme, loadRemixDisabled = false, locale = "en", @@ -252,7 +252,9 @@ const WebComponentLoader = (props) => { ); - if (!isLoading && loading === "success") { + if (isLoading) { + return renderLoadingState(); + } else if (loading === "success") { return renderSuccessState(); } else if (["idle", "failed"].includes(loading)) { return renderFailedState(); diff --git a/src/containers/WebComponentLoader.test.js b/src/containers/WebComponentLoader.test.js index 6aeedc841..297b8942f 100644 --- a/src/containers/WebComponentLoader.test.js +++ b/src/containers/WebComponentLoader.test.js @@ -1,4 +1,4 @@ -import { render, act } from "@testing-library/react"; +import { render, act, screen } from "@testing-library/react"; import React from "react"; import { Provider } from "react-redux"; import configureStore from "redux-mock-store"; @@ -665,3 +665,39 @@ describe("When user is in state", () => { }); }); }); + +describe("When isLoading prop is used", () => { + beforeEach(() => { + const middlewares = []; + const mockStore = configureStore(middlewares); + const initialState = { + editor: { + loading: "success", + project: { + components: [], + }, + openFiles: [], + focussedFileIndices: [], + hasShownSavePrompt: false, + remixLoadFailed: false, + justLoaded: false, + saveTriggered: false, + }, + instructions: {}, + auth: {}, + }; + store = mockStore(initialState); + cookies = new Cookies(); + }); + + test("it respects isLoading prop when rendering", () => { + render( + + + + + , + ); + expect(screen.queryByText("webComponent.loading")).toBeInTheDocument(); + }); +}); From 989b212d606abcd70c8cdc1eed3a438e4147f233 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Thu, 6 Nov 2025 15:58:10 +0000 Subject: [PATCH 3/4] updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fae099da..7b4bb25d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264) - Material symbols font to web component preview page since the Design System depends on this (#1261) +- Ability for host page to force web component into its loading state (#1272) ### Changed From 6a003c37c670007dc48ca9732ba154228acbde9e Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Fri, 7 Nov 2025 15:35:39 +0000 Subject: [PATCH 4/4] sending more data with the project owner --- src/containers/WebComponentLoader.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx index 22df5d049..a94a92d33 100644 --- a/src/containers/WebComponentLoader.jsx +++ b/src/containers/WebComponentLoader.jsx @@ -70,7 +70,10 @@ const WebComponentLoader = (props) => { const user = useSelector((state) => state.auth.user || localStorageUser); const [loadRemix, setLoadRemix] = useState(!!user); const project = useSelector((state) => state.editor.project); - const projectOwner = useSelector((state) => state.editor.project.user_name); + const projectOwnerId = useSelector((state) => state.editor.project.user_id); + const projectOwnerName = useSelector( + (state) => state.editor.project.user_name, + ); const loading = useSelector((state) => state.editor.loading); const justLoaded = useSelector((state) => state.editor.justLoaded); const remixLoadFailed = useSelector((state) => state.editor.remixLoadFailed); @@ -127,10 +130,16 @@ const WebComponentLoader = (props) => { }, [loading, remixLoadFailed]); useEffect(() => { + const projectOwner = { + id: projectOwnerId, + name: projectOwnerName, + identifier: projectIdentifier, + }; + if (justLoaded) { document.dispatchEvent(projectOwnerLoadedEvent(projectOwner)); } - }, [projectOwner, justLoaded]); + }, [projectOwnerId, projectOwnerName, projectIdentifier, justLoaded]); useEffect(() => { if (locale) {