appendItems() on Column - appended items flicker when scrolling

[davidblanar]

Hi everyone,

when appending items through the appendItems() method on the Column component the appended items flicker when scrolling the page. This happens when I try to simulate infinite scroll functionality (as the provider prop does not seem to be loading more items).

To reproduce, modify the Basic component in Column.stories.js like so:

class Basic extends lng.Component {
    static _template() {
      return {
        Column: {
          type: Column,
          h: 500,
          itemSpacing: args.itemSpacing,
          scrollIndex: args.scrollIndex,
          items: Array.apply(null, { length: 20 }).map((_, i) => ({
            type: Button,
            buttonText: `Button ${i + 1}`
          })),
          alwaysScroll: args.alwaysScroll
        }
      };
    }

    _getFocused() {
      return this.tag('Column');
    }

    _captureDown() {
      const index = this.tag("Column").selectedIndex;
      if (index === 9) {
        const items = this.generateItems(5);
        this.tag("Column").appendItems(items);
      }
      return false;
    }

    generateItems(n) {
      const items = [];
      for (let i = 0; i < n; i++) {
        items.push({
          type: Button,
          buttonText: `NEW ${i + 1}`
        });
      }
      return items;
    }
  }

Then hit the down arrow until you're around the 9-10th item and you can see the appended buttons flicker on the screen and move downwards for a split second.
The only way I found to remedy this issue is to hide the appended items with alpha: 0 and then set it to 1 in a setTimeout function.

Thanks,
David

[Cooper]

The provider does not seem to be implemented?

[Emily Rautenberg]

Hi all! The provider prop was removed from the latest FocusManagers as these are meant to be UI components and we do not want to prescribe how to do data injection anymore. We do have a mixin-based solution for setting a provider and lazy-loading content (specifically for adding more rows to a column) that we can prioritize releasing here.