Lazy load data source data for list UI components

[ryansunxl]

Description (*)

If a page has listing UI component, the data source collection of the component is loaded and added to the page DOM in the generated component js tag. However this data collection is never rendered and always refreshed via ajax immediately after page load. It is waste of resource and slows down initial page load.

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes magento/magento2#37190

Manual testing scenarios (*)

1. open any admin listing page that is built using uiCompnennt, e.g. customers listing page

Questions or comments

I think this is a quite exciting performance improvement for many admin pages that has listing component. In my local testing, the TTFB imporved from about 570ms - 420ms

Contribution checklist (*)

• [x] Pull request has a meaningful description of its purpose
• [x] All commits are accompanied by meaningful commit messages
• [x] All new or changed code is covered with unit/integration tests (if applicable)
• [x] README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• [x] All automated tests passed successfully (all builds are green)

[m2-assistant[bot]]

Hi @kuafucode. Thank you for your contribution! Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

:exclamation: Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s) For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here :information_source: Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation. Join Magento Community Engineering Slack and ask your questions in #github channel.

[ryansunxl]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[engcom-Hotel]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[ihor-sviziev]

Hi @kuafucode, Will you be able to fix failing tests?

[ihor-sviziev]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[ryansunxl]

the test is not running and not showing which test case failed, let me try again

[ryansunxl]

@magento run all tests

[magento-automated-testing[bot]]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[ryansunxl]

Was able to locate the failed test case, the current PR breaks 'recently viewed' widget. In stead of making the change to Magento\Ui\Component\Listing\Columns\Listing, I should move this change into lower component Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider.

I'm also thinking of introducing a lazy loading flag to data provide class via ui xml, instead of relying content format in request which is not semantic.

ps. I'm a bit suprised to find out the 'recently viewed' widget config is provided by Magento\Catalog\Ui\DataProvider\Product\Listing\DataProvider , IMO it can be fully provided in the ui xml config section

[engcom-Dash]

Was able to locate the failed test case, the current PR breaks 'recently viewed' widget. In stead of making the change to Magento\Ui\Component\Listing\Columns\Listing, I should move this change into lower component Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider.

I'm also thinking of introducing a lazy loading flag to data provide class via ui xml, instead of relying content format in request which is not semantic.

ps. I'm a bit suprised to find out the 'recently viewed' widget config is provided by Magento\Catalog\Ui\DataProvider\Product\Listing\DataProvider , IMO it can be fully provided in the ui xml config section

Hello @kuafucode,

I wanted to follow up on your comment regarding the changes needed for the 'recently viewed' widget and the lazy loading flag. Will you be implementing these updates? If not, please let us know how we should proceed.

Thanks!

[engcom-Dash]

Closing this PR since it has not been updated in a while. Please feel free to reopen it if needed.

[ryansunxl]

@engcom-Dash please reopen, I'm picking up this work again.

[engcom-Dash]

@engcom-Dash please reopen, I'm picking up this work again.

@kuafucode- I am reopening this PR. Please review and address the https://github.com/magento/magento2/pull/37576#issuecomment-1810885747 so we can proceed. Thank you!

[m2-assistant[bot]]

Hi @kuafucode. Thank you for your contribution! Here are some useful tips on how you can test your changes using Magento test environment. :exclamation: Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s) For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here :information_source: Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation. Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Dash]

@kuafucode: As discussed over Slack, I'm putting it on hold for now. Once you are done with the implementation, please let us know. We'll pick it up and proceed with the necessary steps. Thanks.

[engcom-Dash]

Hello @kuafucode,

This is a reminder to please address this https://github.com/magento/magento2/pull/37576#issuecomment-2418967790.

Thanks!

[engcom-Charlie]

Hi @kuafucode,

Did you get a chance to look into this.

Thank you!

[engcom-Charlie]

Hi @kuafucode,

Did you get a chance to look into this comment?

Thank you!

[engcom-Charlie]

Hi @ryansunxl,

Did you get a chance to look into this change. Currently I am closing this PR, please feel free to reopen it once done with the required implementation.