1

I have a 'veryBigArrayWithData' that can have thousands of records.

When clicking on a lightning-combobox to load label-value pairs from this array, the page becomes unresponsive due to the big processing taking place in order to load the hole dropdown list.

Is there a way to lazy load the records from the array that are shown, so when the user scrolls down more records appear? Loading 100 records at a time would work okay for example.

html:

<lightning-combobox variant="label-hidden" name="options combobox" label="Options combobox" value={selectedValue} placeholder="Select Value" options={options} onchange={handleChange} > </lightning-combobox>

js:

this.options = [] this.options.push({ label: 'Select Contact', value: '' }) for (let i = 0; i < this.veryBigArrayWithData.length ; i++) { const newOption = this.veryBigArrayWithData[i] this.options.push({ label: newOption.Name, value: newOption.Id }) }
Improve this question
4
  • where are you requesting the data from? Commented Apr 23, 2021 at 22:19
  • A typeahead/lookup component is good use case for this. Have you looked into that? There are already built ready to use components on the web. Commented Apr 24, 2021 at 10:39
  • @glls the data comes from Apex, but is already on the js array 'veryBigArrayWithData', before being loaded to the 'options' array. Commented Apr 26, 2021 at 13:32
  • @manjit5190 yes I've looked into lookups and it could be implemented but it is not actually the business requirement in this case Commented Apr 26, 2021 at 13:37

1 Answer 1

Reset to default
1

Yes, it is possible to do so, however, simply loading large amounts of data to the client can have a toll on the user experience (loading time, lag, unresponsiveness, call it whatever you like). So, it is always preferable to limit the amount of data loaded/requested from the server. Once you have that figured out (if not already implemented), you might want to "paginate" or split your array into chunks. This is well explained in w3resources Chunk an array into smaller arrays of a specified size.

Once you have your array chunked into smaller arrays and need some sort of mechanism to load more results aka "infinite scrolling", you can add an event listener to your lwc to fire when a user has reached the bottom of the page or element:

window.addEventListener( 'scroll', (e) => {this.handleScroll(e)});

and calculate the position of your current scrollY compared to the height of your element to determine if the event should be fired, and then add your logic to "load more results"

handleScroll(e) { this.element= this.template.querySelector('.my-element') if ( window.scrollY + window.innerHeight > this.element.offsetHeight - PIXELSYOUWANT) { console.log("can use to load some more content here for infinite scrolling"); } }

fyi: the above will fire every time you scroll past the calculated value, so, you will have to add additional logic to prevent it from firing on every scroll.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.