fix(VInfiniteScroll): load event gets emitted endlessly even if status is empty

[elkofy]

Description

The load events keeps emitting endlessly event though there is no more data to load.
fixes #18895

Markup:

<template>
  <v-app>
    <v-container>
      <VInfiniteScroll @load="infiniteLoad">
        <VList class="py-0">
          <template v-for="(index) in data" :key="index">
            <VDivider v-if="index > 0" />
            <VListItem
              class="list-item-hover-class"
              lines="one"
              min-height="66px"
            >
              <VListItemTitle>
                <span class="text-sm text-high-emphasis font-weight-medium">
                  Notification {{ index }}
                </span>
              </VListItemTitle>
              <VListItemSubtitle>
                <span class="text-xs"> Test </span>
              </VListItemSubtitle>
            </VListItem>
          </template>
        </VList>
      </VInfiniteScroll>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  type VueEmitsParameters<E, N extends string> =
    'emits' extends keyof E
      ? E['emits'] extends infer EmitType
        ? EmitType extends Record<N, (...args: infer P) => any>
          ? P
          : never
        : never
      : never;

  const loaded = ref(0)
  const data = ref(0)
  const page = [43, 45]

  async function loadAlarms () {
    if (loaded.value < page.length) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      data.value += page[loaded.value++]
      return data.value
    }
    return undefined
  }

  async function infiniteLoad (...[event]) {
    console.log('infiniteLoad: ', event)
    event.done('loading')
    try {
      const newAlarms = await loadAlarms()
      console.log('N@43: ', newAlarms !== undefined ? 'ok' : 'empty')
      event.done(newAlarms !== undefined ? 'ok' : 'empty')
    } catch (error) {
      console.error(error)
      event.done('error')
    }
  }
</script>