Issues with timing and redraw function

[ffxsam]

I have a dashboard I'm designing that needs to use a masonry layout. I've set up my dashboard cards so that anytime any of them update their UI in a way that would influence the size, they emit a change:size event, which will bubble up to the Dashboard component and be handled there:

<RecentActivity @change:size="redrawMasonry"/>

  methods: {
    async redrawMasonry() {
      await this.$nextTick();
      console.log('redraw!');
      this.$redrawVueMasonry();
    },
  },

As you can see in this video, it works kinda randomly. Note the extra space at the bottom of the page that gets left there, and other times removed. And sometimes, it won't redraw to expand the space, which results in a white area being shown where the page background doesn't extend.

It's definitely some sort of timing issue, because when I change the method above to:

    async redrawMasonry() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('redraw!');
      this.$redrawVueMasonry();
    },

then it works perfectly.

[kirkbushell]

I've had to do this numerous times, often because the simple act of calculating changes takes longer than we might otherwise expect. I have a number of places where I wait 50ms or so before doing a redraw, to ensure the elements are re-rendered and ready for masonry.

I don't think this is a masonry issue.

[shershen08]

Closing as no updates for a while. Feel free to reopen if you have extra input.