placeholder is not displayed

[Sirros]

Description

Since it takes some time to load the image, in order to have a better experience, I tried adding placeholder to the component, but it didn't work.
I am referring to the official example. https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-data-loading--placeholder-template

Steps to check or reproduce

"vue": "^2.6.12",
"@egjs/vue-infinitegrid": "^4.7.1"

<masonry-infinite-grid
  v-if="!loading"
  class="water-fall-container"
  ref="ig"
  align="stretch"
  :gap="20"
  :column="column"
  :useTransform="true"
  :observeChildren="true"
  :useResizeObserver="true"
  @request-append="onRequestAppend"
  @render-complete="renderComplete"
>
  <div
    class="water-fall-item water-fall-mounted"
    v-for="(item, index) in items"
    :key="item.id + '_' + item.name"
    :data-grid-groupkey="requestParams.pageNumber"
    @mouseenter="itemHover(index)"
    @mouseleave="itemLeave"
  >
    <CommonThumbnail
      type="goods"
      :item="item"
      :index="index"
      :isStuff="false"
      :columnSize="dynColumnSize"
      @collect="collect"
    />

    <div class="water-fall-info-block">
      <CommonNameBlock
        :item="item"
        :index="index"
        :itemCurrentHover="itemCurrentHover"
        @openDrawer="openDrawer"
      />

      <CommonIndicators :item="item" :showField="showField" />
    </div>
  </div>
  <template v-slot:placeholder="{ item }">
    <div
      class="placeholder"
      :key="item.id + '_' + item.name"
      :data-grid-groupkey="requestParams.pageNumber"
    ></div>
  </template>
</masonry-infinite-grid>
<div
  class="water-fall-loading"
  v-loading="!noMore"
  cook-loading-background="rgba(251, 251, 252, 0)"
>
  {{ tips }}
</div>

<script> ... </script>

<style lang="scss" scoped>
.water-fall-container {
  overflow: hidden;
  margin-bottom: 30px;
  min-height: 150px;
}

.water-fall-info-block {
  padding: 15px;
}

.placeholder {
  width: 250px;
  border-radius: 5px;
  background: red;
  height: 250px;
}
</style>

[BianTan]

What I'm experiencing is that it doesn't appear to be placeholder on the first request.
"@egjs/vue3-infinitegrid": "^4.11.0"

[Sirros]

@daybrush

[mr-sanders]

Same for me. "@egjs/vue-infinitegrid": "^4.11.1"
It seems that there is an issue with the initial cursor position in the GroupManager when there are no items. When I call appendPlaceholders, in the following lines this.groups contains a group with placeholders, but both cursors have the value -1, groups contains an empty array, and getVisibleGroups returns an empty array.

egjs-infinitegrid/packages/infinitegrid/src/GroupManager.ts

Lines 170 to 172 in add5361

	public getVisibleGroups(includePlaceholders?: boolean): InfiniteGridGroup[] {
	const groups = this.groups.slice(this.startCursor, this.endCursor + 1);

[guesung]

Did you add wait() and ready() in the setTimeout callback function? I solved the same issue this way! The Guide suggests the same approach.

Also, you need to set a height for the InfiniteGrid component.