From 710cbb0edce4583960d7940b34bfef7e37f5cc3d Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Sun, 4 Feb 2024 01:29:39 +0100 Subject: [PATCH 1/5] WIP: Fix by stop loading "onload" but not when dom is ready --- packages/neos-ui/src/Containers/ContentCanvas/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index 79105c163e..590ab8daf8 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -163,6 +163,13 @@ export default class ContentCanvas extends PureComponent { const {requestRegainControl, requestLogin} = this.props; const iframe = event.target; + if (iframe?.contentDocument) { + const {stopLoading} = this.props; + this.skipNextLoaderStatusUpdate = true; + iframe.contentDocument.__isInitialized = true; + stopLoading(); + } + try { if (iframe) { // TODO: Find a more reliable way to determine login page From 5896920a1d65475349bdb9d89b342563916e7f45 Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Sun, 4 Feb 2024 01:29:47 +0100 Subject: [PATCH 2/5] Revert "WIP: Fix by stop loading "onload" but not when dom is ready" This reverts commit 710cbb0edce4583960d7940b34bfef7e37f5cc3d. --- packages/neos-ui/src/Containers/ContentCanvas/index.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index 590ab8daf8..79105c163e 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -163,13 +163,6 @@ export default class ContentCanvas extends PureComponent { const {requestRegainControl, requestLogin} = this.props; const iframe = event.target; - if (iframe?.contentDocument) { - const {stopLoading} = this.props; - this.skipNextLoaderStatusUpdate = true; - iframe.contentDocument.__isInitialized = true; - stopLoading(); - } - try { if (iframe) { // TODO: Find a more reliable way to determine login page From 956cdf8448fb934440bcd328d17e9f1653ecc644 Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Wed, 7 Feb 2024 08:34:14 +0100 Subject: [PATCH 3/5] WIP: Bugfix introduce `ui.contentCanvas.loadingFailed` which is a bit flaky --- .../src/UI/ContentCanvas/index.ts | 13 ++++++++ .../src/Containers/ContentCanvas/index.js | 32 ++++++++++++++++++- .../LoadingIndicator/index.js | 15 +++++++-- .../LoadingIndicator/style.module.css | 6 ++++ .../react-ui-components/src/Frame/frame.tsx | 1 + 5 files changed, 64 insertions(+), 3 deletions(-) diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts index cf9df06892..82dc9dff9f 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts +++ b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts @@ -17,6 +17,7 @@ export interface State extends Readonly<{ formattingUnderCursor: Formatting; currentlyEditedPropertyName: string | null; isLoading: boolean; + loadingFailed: boolean; focusedProperty: string | null; backgroundColor: string; shouldScrollIntoView: boolean; @@ -29,6 +30,7 @@ export const defaultState: State = { formattingUnderCursor: {}, currentlyEditedPropertyName: null, isLoading: true, + loadingFailed: false, focusedProperty: null, backgroundColor: '#ffffff', shouldScrollIntoView: false, @@ -44,6 +46,7 @@ export enum actionTypes { FORMATTING_UNDER_CURSOR = '@neos/neos-ui/UI/ContentCanvas/FORMATTING_UNDER_CURSOR', SET_CURRENTLY_EDITED_PROPERTY_NAME = '@neos/neos-ui/UI/ContentCanvas/SET_CURRENTLY_EDITED_PROPERTY_NAME', START_LOADING = '@neos/neos-ui/UI/ContentCanvas/START_LOADING', + LOADING_FAILED = '@neos/neos-ui/UI/ContentCanvas/LOADING_FAILED', STOP_LOADING = '@neos/neos-ui/UI/ContentCanvas/STOP_LOADING', RELOAD = '@neos/neos-ui/UI/ContentCanvas/RELOAD', FOCUS_PROPERTY = '@neos/neos-ui/UI/ContentCanvas/FOCUS_PROPERTY', @@ -59,6 +62,7 @@ const setFormattingUnderCursor = (formatting: Formatting) => createAction(action const setCurrentlyEditedPropertyName = (propertyName: string) => createAction(actionTypes.SET_CURRENTLY_EDITED_PROPERTY_NAME, propertyName); const startLoading = () => createAction(actionTypes.START_LOADING); const stopLoading = () => createAction(actionTypes.STOP_LOADING); +const loadingFailed = () => createAction(actionTypes.LOADING_FAILED); const reload = (uri: string) => createAction(actionTypes.RELOAD, {uri}); // Set a flag to tell ContentCanvas to scroll the focused node into view const requestScrollIntoView = (activate: boolean) => createAction(actionTypes.REQUEST_SCROLL_INTO_VIEW, activate); @@ -77,6 +81,7 @@ export const actions = { setCurrentlyEditedPropertyName, startLoading, stopLoading, + loadingFailed, reload, requestScrollIntoView, requestRegainControl, @@ -117,10 +122,18 @@ export const reducer = (state: State = defaultState, action: InitAction | Action } case actionTypes.STOP_LOADING: { draft.isLoading = false; + draft.loadingFailed = false; break; } case actionTypes.START_LOADING: { draft.isLoading = true; + draft.loadingFailed = false; + break; + } + case actionTypes.LOADING_FAILED: { + if (draft.isLoading) { + draft.loadingFailed = true; + } break; } case actionTypes.REQUEST_SCROLL_INTO_VIEW: { diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index 79105c163e..7387503104 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -23,6 +23,7 @@ import style from './style.module.css'; }), { startLoading: actions.UI.ContentCanvas.startLoading, stopLoading: actions.UI.ContentCanvas.stopLoading, + loadingFailed: actions.UI.ContentCanvas.loadingFailed, requestRegainControl: actions.UI.ContentCanvas.requestRegainControl, requestLogin: actions.UI.ContentCanvas.requestLogin }) @@ -39,6 +40,7 @@ export default class ContentCanvas extends PureComponent { src: PropTypes.string, startLoading: PropTypes.func.isRequired, stopLoading: PropTypes.func.isRequired, + loadingFailed: PropTypes.func.isRequired, requestRegainControl: PropTypes.func.isRequired, requestLogin: PropTypes.func.isRequired, currentEditPreviewMode: PropTypes.string.isRequired, @@ -57,6 +59,8 @@ export default class ContentCanvas extends PureComponent { // We don't need to put this into state skipNextLoaderStatusUpdate = false; + iframeInitialisationTimeout = null; + componentDidUpdate(prevProps) { // Start loading as soon as the src has changed, but watch out for skipNextLoaderStatusUpdate if (this.props.src !== prevProps.src && !this.skipNextLoaderStatusUpdate) { @@ -145,10 +149,17 @@ export default class ContentCanvas extends PureComponent { } handelLoadStart = () => { + if (this.iframeInitialisationTimeout) { + clearTimeout(this.iframeInitialisationTimeout); + } this.props.startLoading(); }; onFrameChange = (iframeWindow, iframeDocument) => { + if (this.iframeInitialisationTimeout) { + clearTimeout(this.iframeInitialisationTimeout); + } + if (iframeDocument.__isInitialized) { return; } @@ -160,9 +171,22 @@ export default class ContentCanvas extends PureComponent { } handleFrameAccess = event => { - const {requestRegainControl, requestLogin} = this.props; + const {requestRegainControl, requestLogin, loadingFailed} = this.props; const iframe = event.target; + if (this.iframeInitialisationTimeout) { + clearTimeout(this.iframeInitialisationTimeout); + } + + // this callback is called onLoad, thus the response from the server was already received. + // but the neos ui expects the event `Neos.Neos.Ui.ContentReady` to be fired (see contentDidUpdate) to continue + // if that doesn't happen after two seconds we indicate that loading took to long + // https://github.com/neos/neos-ui/issues/3477 + this.iframeInitialisationTimeout = setTimeout(() => { + console.error('The server did not respond as expected. The iframe should boot up and fire the `Neos.Neos.Ui.ContentReady` event. Timed out after 2 seconds.'); + loadingFailed(); + }, 500); + try { if (iframe) { // TODO: Find a more reliable way to determine login page @@ -203,4 +227,10 @@ export default class ContentCanvas extends PureComponent { requestRegainControl(this.state.loadedSrc, err.toString()); } } + + componentWillUnmount() { + if (this.iframeInitialisationTimeout) { + clearTimeout(this.iframeInitialisationTimeout); + } + } } diff --git a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js index a5355ae2cb..8c8a255662 100644 --- a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js +++ b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js @@ -5,14 +5,25 @@ import {connect} from 'react-redux'; import style from './style.module.css'; @connect($transform({ - isLoading: $get('ui.contentCanvas.isLoading') + isLoading: $get('ui.contentCanvas.isLoading'), + loadingFailed: $get('ui.contentCanvas.loadingFailed') })) export default class LoadingIndicator extends PureComponent { static propTypes = { - isLoading: PropTypes.bool.isRequired + isLoading: PropTypes.bool.isRequired, + loadingFailed: PropTypes.bool.isRequired } render() { + if (this.props.isLoading && this.props.loadingFailed) { + return ( +
+
+
+
+
+ ); + } if (this.props.isLoading) { return (
diff --git a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css index 08629a6f9b..66011ca7d3 100644 --- a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css +++ b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css @@ -19,6 +19,12 @@ animation: cssload-width 2s cubic-bezier(.45, 0, 1, 1) infinite; } +.loadingIndicator__failed { + height: 100%; + position: relative; + background-color: red; +} + @keyframes cssload-width { 0%, 100% { diff --git a/packages/react-ui-components/src/Frame/frame.tsx b/packages/react-ui-components/src/Frame/frame.tsx index 57b306abb1..c24572e338 100644 --- a/packages/react-ui-components/src/Frame/frame.tsx +++ b/packages/react-ui-components/src/Frame/frame.tsx @@ -184,6 +184,7 @@ export default class Frame extends PureComponent { public componentWillUnmount(): void { if (this.ref) { + // todo not a listener!!! document.removeEventListener('Neos.Neos.Ui.ContentReady', this.renderFrameContents); } this.removeClickListener(); From 10bffd1667affc6077f64766c87fba303273cf09 Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Sat, 10 Feb 2024 10:53:28 +0100 Subject: [PATCH 4/5] Revert "WIP: Bugfix introduce `ui.contentCanvas.loadingFailed` which is a bit flaky" This reverts commit 956cdf8448fb934440bcd328d17e9f1653ecc644. --- .../src/UI/ContentCanvas/index.ts | 13 -------- .../src/Containers/ContentCanvas/index.js | 32 +------------------ .../LoadingIndicator/index.js | 15 ++------- .../LoadingIndicator/style.module.css | 6 ---- .../react-ui-components/src/Frame/frame.tsx | 1 - 5 files changed, 3 insertions(+), 64 deletions(-) diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts index 82dc9dff9f..cf9df06892 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts +++ b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.ts @@ -17,7 +17,6 @@ export interface State extends Readonly<{ formattingUnderCursor: Formatting; currentlyEditedPropertyName: string | null; isLoading: boolean; - loadingFailed: boolean; focusedProperty: string | null; backgroundColor: string; shouldScrollIntoView: boolean; @@ -30,7 +29,6 @@ export const defaultState: State = { formattingUnderCursor: {}, currentlyEditedPropertyName: null, isLoading: true, - loadingFailed: false, focusedProperty: null, backgroundColor: '#ffffff', shouldScrollIntoView: false, @@ -46,7 +44,6 @@ export enum actionTypes { FORMATTING_UNDER_CURSOR = '@neos/neos-ui/UI/ContentCanvas/FORMATTING_UNDER_CURSOR', SET_CURRENTLY_EDITED_PROPERTY_NAME = '@neos/neos-ui/UI/ContentCanvas/SET_CURRENTLY_EDITED_PROPERTY_NAME', START_LOADING = '@neos/neos-ui/UI/ContentCanvas/START_LOADING', - LOADING_FAILED = '@neos/neos-ui/UI/ContentCanvas/LOADING_FAILED', STOP_LOADING = '@neos/neos-ui/UI/ContentCanvas/STOP_LOADING', RELOAD = '@neos/neos-ui/UI/ContentCanvas/RELOAD', FOCUS_PROPERTY = '@neos/neos-ui/UI/ContentCanvas/FOCUS_PROPERTY', @@ -62,7 +59,6 @@ const setFormattingUnderCursor = (formatting: Formatting) => createAction(action const setCurrentlyEditedPropertyName = (propertyName: string) => createAction(actionTypes.SET_CURRENTLY_EDITED_PROPERTY_NAME, propertyName); const startLoading = () => createAction(actionTypes.START_LOADING); const stopLoading = () => createAction(actionTypes.STOP_LOADING); -const loadingFailed = () => createAction(actionTypes.LOADING_FAILED); const reload = (uri: string) => createAction(actionTypes.RELOAD, {uri}); // Set a flag to tell ContentCanvas to scroll the focused node into view const requestScrollIntoView = (activate: boolean) => createAction(actionTypes.REQUEST_SCROLL_INTO_VIEW, activate); @@ -81,7 +77,6 @@ export const actions = { setCurrentlyEditedPropertyName, startLoading, stopLoading, - loadingFailed, reload, requestScrollIntoView, requestRegainControl, @@ -122,18 +117,10 @@ export const reducer = (state: State = defaultState, action: InitAction | Action } case actionTypes.STOP_LOADING: { draft.isLoading = false; - draft.loadingFailed = false; break; } case actionTypes.START_LOADING: { draft.isLoading = true; - draft.loadingFailed = false; - break; - } - case actionTypes.LOADING_FAILED: { - if (draft.isLoading) { - draft.loadingFailed = true; - } break; } case actionTypes.REQUEST_SCROLL_INTO_VIEW: { diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index 7387503104..79105c163e 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -23,7 +23,6 @@ import style from './style.module.css'; }), { startLoading: actions.UI.ContentCanvas.startLoading, stopLoading: actions.UI.ContentCanvas.stopLoading, - loadingFailed: actions.UI.ContentCanvas.loadingFailed, requestRegainControl: actions.UI.ContentCanvas.requestRegainControl, requestLogin: actions.UI.ContentCanvas.requestLogin }) @@ -40,7 +39,6 @@ export default class ContentCanvas extends PureComponent { src: PropTypes.string, startLoading: PropTypes.func.isRequired, stopLoading: PropTypes.func.isRequired, - loadingFailed: PropTypes.func.isRequired, requestRegainControl: PropTypes.func.isRequired, requestLogin: PropTypes.func.isRequired, currentEditPreviewMode: PropTypes.string.isRequired, @@ -59,8 +57,6 @@ export default class ContentCanvas extends PureComponent { // We don't need to put this into state skipNextLoaderStatusUpdate = false; - iframeInitialisationTimeout = null; - componentDidUpdate(prevProps) { // Start loading as soon as the src has changed, but watch out for skipNextLoaderStatusUpdate if (this.props.src !== prevProps.src && !this.skipNextLoaderStatusUpdate) { @@ -149,17 +145,10 @@ export default class ContentCanvas extends PureComponent { } handelLoadStart = () => { - if (this.iframeInitialisationTimeout) { - clearTimeout(this.iframeInitialisationTimeout); - } this.props.startLoading(); }; onFrameChange = (iframeWindow, iframeDocument) => { - if (this.iframeInitialisationTimeout) { - clearTimeout(this.iframeInitialisationTimeout); - } - if (iframeDocument.__isInitialized) { return; } @@ -171,22 +160,9 @@ export default class ContentCanvas extends PureComponent { } handleFrameAccess = event => { - const {requestRegainControl, requestLogin, loadingFailed} = this.props; + const {requestRegainControl, requestLogin} = this.props; const iframe = event.target; - if (this.iframeInitialisationTimeout) { - clearTimeout(this.iframeInitialisationTimeout); - } - - // this callback is called onLoad, thus the response from the server was already received. - // but the neos ui expects the event `Neos.Neos.Ui.ContentReady` to be fired (see contentDidUpdate) to continue - // if that doesn't happen after two seconds we indicate that loading took to long - // https://github.com/neos/neos-ui/issues/3477 - this.iframeInitialisationTimeout = setTimeout(() => { - console.error('The server did not respond as expected. The iframe should boot up and fire the `Neos.Neos.Ui.ContentReady` event. Timed out after 2 seconds.'); - loadingFailed(); - }, 500); - try { if (iframe) { // TODO: Find a more reliable way to determine login page @@ -227,10 +203,4 @@ export default class ContentCanvas extends PureComponent { requestRegainControl(this.state.loadedSrc, err.toString()); } } - - componentWillUnmount() { - if (this.iframeInitialisationTimeout) { - clearTimeout(this.iframeInitialisationTimeout); - } - } } diff --git a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js index 8c8a255662..a5355ae2cb 100644 --- a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js +++ b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/index.js @@ -5,25 +5,14 @@ import {connect} from 'react-redux'; import style from './style.module.css'; @connect($transform({ - isLoading: $get('ui.contentCanvas.isLoading'), - loadingFailed: $get('ui.contentCanvas.loadingFailed') + isLoading: $get('ui.contentCanvas.isLoading') })) export default class LoadingIndicator extends PureComponent { static propTypes = { - isLoading: PropTypes.bool.isRequired, - loadingFailed: PropTypes.bool.isRequired + isLoading: PropTypes.bool.isRequired } render() { - if (this.props.isLoading && this.props.loadingFailed) { - return ( -
-
-
-
-
- ); - } if (this.props.isLoading) { return (
diff --git a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css index 66011ca7d3..08629a6f9b 100644 --- a/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css +++ b/packages/neos-ui/src/Containers/SecondaryToolbar/LoadingIndicator/style.module.css @@ -19,12 +19,6 @@ animation: cssload-width 2s cubic-bezier(.45, 0, 1, 1) infinite; } -.loadingIndicator__failed { - height: 100%; - position: relative; - background-color: red; -} - @keyframes cssload-width { 0%, 100% { diff --git a/packages/react-ui-components/src/Frame/frame.tsx b/packages/react-ui-components/src/Frame/frame.tsx index c24572e338..57b306abb1 100644 --- a/packages/react-ui-components/src/Frame/frame.tsx +++ b/packages/react-ui-components/src/Frame/frame.tsx @@ -184,7 +184,6 @@ export default class Frame extends PureComponent { public componentWillUnmount(): void { if (this.ref) { - // todo not a listener!!! document.removeEventListener('Neos.Neos.Ui.ContentReady', this.renderFrameContents); } this.removeClickListener(); From d4bf85816ec9803544b50bbeee77f80e4abef301 Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Sat, 10 Feb 2024 11:05:59 +0100 Subject: [PATCH 5/5] Use on load AND DOMContentLoaded --- packages/neos-ui/src/Containers/ContentCanvas/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index 79105c163e..96e4e15086 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -163,6 +163,15 @@ export default class ContentCanvas extends PureComponent { const {requestRegainControl, requestLogin} = this.props; const iframe = event.target; + if (iframe?.contentDocument) { + const {stopLoading} = this.props; + iframe.contentDocument.addEventListener('DOMContentLoaded', () => { + iframe.contentDocument.__isInitialized = true; + this.skipNextLoaderStatusUpdate = true; + stopLoading(); + }); + } + try { if (iframe) { // TODO: Find a more reliable way to determine login page