Unanswered

Lazy loading few columns on a table

(0) Share

Report

Posted on by PradeepKumarPeri

Hello,

I am trying to display a Details list(office ui react) in which columns display data fetched from different apis. Since the control loading time is way higher i am checking for any options to lazy load the columns. That means i will start displaying the standard information of the table first and load columns when they get the data from apis? Is this approach possible? any examples/samples?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (0)

Hemant Gaur on at

Like (0)

Report
Copy link

Link copied!

I am looking into getting a demo sample for this. In general PCF would support it similar to how the react control would. Check out this example here for great grid lazy load and caching demo. UCI lists on phone also lazy loads on scroll when rendered in full page. For example you can use the CDS pagination for fetching the 50 records from server and in the controls they can be rendered 10 at a time. Other data souces can be used in the similar manner if pagination APIs are supported, else filterting can be used to get data in chunks.

https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/lazy-loading/

hemant

Was this reply helpful? Yes No
ArjanM 10 on at

Like (0)

Report
Copy link

Link copied!

Hi,

React works on state and data-binding. When data changes you change the state (using setState) in the React component. This will trigger a render with the new data.

So using React you should be able to render the initial control (without any data in the state) and display some loading spinner. Then async load the data from your API and set the state on completion of the async.

Of course the same principal can be achieved without using React, by rendering an empty control, and then async retrieve the data. On the complete event update the control.

For React State and Lifecycle see: https://reactjs.org/docs/state-and-lifecycle.html

Was this reply helpful? Yes No