Slot for no results added

src/components/InfiniteLoading.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Props, Params, State, StateHandler } from "@root/types";
-import { onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
+import { computed, onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
 import { startObserver, getParentEl, isVisible } from "@root/utils";
 // @ts-ignore
 import Spinner from "./Spinner.vue";
@@ -43,6 +43,7 @@ const stateHandler: StateHandler = {
     state.value = "loading";
   },
   async loaded() {
+    params.firstload = false;
     state.value = "loaded";
     const parentEl = params.parentEl || document.documentElement;
     await nextTick();
@@ -71,6 +72,12 @@ onMounted(async () => {
 onUnmounted(() => {
   observer?.disconnect();
 });
+
+const showNoMore = computed(() => state.value == "complete" && !params.firstload);
+
+const showNoResults = computed(() => state.value == "complete" && params.firstload);
+
+const showError = computed(() => state.value === "error");
 </script>
 
 <template>
@@ -80,10 +87,13 @@ onUnmounted(() => {
         <Spinner />
       </slot>
     </div>
-    <slot v-if="state == 'complete'" name="complete">
+    <slot v-if="showNoMore" name="complete">
       <span> {{ slots?.complete || "No more results!" }} </span>
     </slot>
-    <slot v-if="state == 'error'" name="error" :retry="params.emit">
+    <slot v-if="showNoResults" name="noResults">
+      <span> {{ slots?.noResults || "No data found!" }} </span>
+    </slot>
+    <slot v-if="showError" name="error" :retry="params.emit">
       <span class="state-error">
         <span>{{ slots?.error || "Oops something went wrong!" }}</span>
         <button class="retry" @click="params.emit">retry</button>

src/types.ts

@@ -22,6 +22,7 @@ export interface Params {
 
 export interface Slots {
   complete?: string;
+  noResults?: string;
   error?: string;
 }