Skip to content

Resolve "Optimize AB data flow for data source and integrations"

Jérémie Pardou requested to merge 1857-migrate-to-page-stores into develop

What is in this MR

This MR fixes the store inconsistency during page load issue.

Prior to this MR, when we were loading a new page, we were loading the builder with its pages then the data sources, then the data source contents and then the elements. The elements needed to be last otherwise we had a quick flash of the element without the content before seing the full page with data.

With the element loading last, when we were navigating to another page, the page was blank immediately after the click and then appeared after all the data were loaded.

The behaviour we really want is to keep the previous page during the data loading then instantly switch to the new page when data are fully loaded.

Furthermore, a dataSource content was updated only when a change was detected in a computed property that use the formula using this dataSource content. This was working well most of the time but if a data source that was a dependency of another data source was updated, the update wasn't triggering the other data source content update thus the page displaying wrong data.

By switching to page related stores, we can keep the previous data while loading the new ones and only when everything is ready, switch to the new page.

Also it makes possible to fix the data source content issue: every time a data source or the data sent to the backend change, all data source contents are updated at once so we have up to date data all the time.

Another good side effect of the MR, the public version and the editor version get closer and closer in term of logic. May be at some point we should be able to merge them.

How to test this MR

  • Just use the populate_test_data command to initialize an application with demo data
  • navigate from one page to another in the editor, in the preview and in a published app, the page should show a small "progress bar" at the top during transition and the previous content should still be displayed while the data are loading, then the new page should be display in it's final state.
  • Create three data sources, one depending on a page parameter, a second depending on the first and a third depending on the second then creates an element that displays a data from the third data source. Now you can update one of the first or second data source and see the element value being updated. See image for an example.
    • image

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #1857 (closed) Closes #1887 (closed)

Edited by Jérémie Pardou

Merge request reports