[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: |
|
||||||||
| Issue Links: |
|
||||||||
| 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 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: 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 ] |
| 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 |