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
    })
}
4
  • where are you requesting the data from?
    – glls
    Apr 23 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.
    – manjit5190
    Apr 24 at 10:39
  • @glls the data comes from Apex, but is already on the js array 'veryBigArrayWithData', before being loaded to the 'options' array.
    – TEo
    Apr 26 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
    – TEo
    Apr 26 at 13:37
0

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 you 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 to 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.