Refreshing the list with new data

[kasperlewau]

I'm in the process of presenting a bunch of items (length differs from ~10 to ~10k), and I'm facing a slight issue with refreshing my Hyperlist instance with new items.

The code looks something like this:

const dataset = ['a', 'b', 'c', 'd']
const el = document.getElementById('mylist')

const listConfig = {
  itemHeight: 10,
  generate: idx => '<span>${data[idx] || "placeholder"}</span>',
  get total () {
    return dataset.length + 20
  }
}

const list = new HyperList(el, conf)

setTimeout(() => {
  dataset.push(...['e', 'f', 'g', 'h'])
  list.refresh(el, listConfig)
}, 2500)

My issue is this: The list won't re-render placeholders at index 4-7.

However, if I add some pieces to the above (or simply scroll by myself):

// setTimeout(() => {
//   dataset.push(...['e', 'f', 'g', 'h'])
//   list.refresh(el, listConfig)
   el.scrollTop = listConfig.itemHeight * 1.5; // scroll past the first item
   setTimeout(() => {
     el.scrollTop = 0; // scroll back to the top
   }, 10)
// }, 2500)

The placeholders at index 4-7 do get re-rendered.

Should I be calling some other method than .refresh to reach the desired result, or simply kill off the list instance and create a new one as my dataset gets filled up?

The end goal is to couple hyperlist with an IntersectionObserver, call the specified endpoint on intersect and fill the dataset up.

I've toyed with replacing the dataset altogether with a dataset.slice() & list.refresh(), but that does not yield a different result.

I've setup a gist and a requirebin of the above.

[soyuka]

Hi,

Yes because there are some conditions that need to be met so that rendering can proceed (I see at least 2 getting in your way). Those conditions are there for performance but I'll see if I find a way to force refreshing without changing start/end calculation positions!

[soyuka]

@kasperlewau may you give #30 a shot?

[kasperlewau]

@soyuka Neat! I'll give that a go 👍

[kasperlewau]

@soyuka That did it for me. Many thanks! 🚀