[MGNLFE-156] Greenbars sometimes dont load - Update Template Annotations when updated prop is passed to EditorPage Created: 07/Dec/21  Updated: 21/Jan/22  Resolved: 13/Dec/21

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: 1.2.0

Type: Improvement Priority: Neutral
Reporter: Bartosz Staryga Assignee: Canh Nguyen
Resolution: Done Votes: 0
Labels: VN-Implementation
Remaining Estimate: Not Specified
Time Spent: 1d 3.5h
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2021-12-08 at 11.44.55.png    
Issue Links:
Relates
relates to PAGES-545 Remove active requests check in post ... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Sprint: HL & LD 41
Story Points: 3

 Description   

Take nextjs-ssr-minimal example from
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse?at=refs%2Fheads%2Fnextjs

We want to fetch Template Annotations in the browser to have p13n working (session cookie to have correct selected variants).

We can not render EditablePage, fetch the template annotations, and pass the new templateAnnotation prop to EditablePage, as the components are not updated then.

It is maybe due to storing template annotations in state and not updating state on new props.

Hence we had to use a trick as follows:
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse/spa/nextjs-ssr-minimal/pages/%5B%5B...pathname%5D%5D.js?at=refs%2Fheads%2Fnextjs#98

This causes (my guess here) race condition as page sometimes loads faster then JS loaded by bridge and there is no green bars at all.

Link to the video: https://magnolia-cms.slack.com/archives/G012JS95BRT/p1638970438031400?thread_ts=1638968179.030000&cid=G012JS95BRT



 Comments   
Comment by Christopher Zimmermann [ 07/Dec/21 ]

So the actual problem that you experience is that sometimes the green bars don't load?

Comment by Bartosz Staryga [ 07/Dec/21 ]

The problem with this ticket is that the green bars will never show if we just pass updated templateAnnotations to already exiting EditablePage, hence the tricky code that in Pages app it waits for template annotations to be already available and only then EditablePage is rendered.

Green bars still sometimes do not load, but it is due to some other issue, I am guessing maybe some race condition between JS of a bridge and the JS of a page - no idea here.

Comment by Robert Šiška [ 07/Dec/21 ]

Maybe this could help: https://itnext.io/how-to-updating-state-on-prop-changes-2296a03ef08c

Comment by Bartosz Staryga [ 07/Dec/21 ]

I'd say best would be not to use state at all

Comment by Bartosz Staryga [ 08/Dec/21 ]

When fetching with a workaround I'd notice that when there is no greenbars I get the page comment cms:page but there is no area/components comments.

Comment by Bartosz Staryga [ 08/Dec/21 ]

For ⬆️

Comment by Robert Šiška [ 08/Dec/21 ]

Page annotation is rendered also in preview (otherwise the actionbar would broke on preview), so it's all the same issue.

 

Did you try the workaround with the `getDerivedStateFromProps`?  I know it's not ideal, but it could solve the issues until we find a better solution.

Comment by Bartosz Staryga [ 08/Dec/21 ]

rsiska react-editor lib would have to use `getDerivedStateFromProps` to update temp ann state when new props are passed to EditablePage not me

Generated at Mon Feb 12 05:44:47 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.