fix(VInfiniteScroll): hide side element when empty (#21749)

resolves #21705

Author: J-Sek

packages/docs/src/examples/v-infinite-scroll/status-reset.vue renamed to packages/docs/src/examples/v-infinite-scroll/misc-reset.vue

@@ -3,8 +3,16 @@
     <div class="d-flex ga-3 mb-2">
       <v-chip>Server items: {{ serverItems.length }}</v-chip>
       <v-chip>Loaded items: {{ items.length }}</v-chip>
+      <v-spacer></v-spacer>
+      <v-checkbox v-model="showEmptyText" hide-details="" label="show empty text"></v-checkbox>
     </div>
-    <v-infinite-scroll ref="scroll" height="300" side="both" @load="load">
+    <v-infinite-scroll
+      ref="scroll"
+      :empty-text="showEmptyText ? 'No more records' : ''"
+      height="300"
+      side="both"
+      @load="load"
+    >
       <template v-for="(item, index) in items" :key="index">
         <div :class="['px-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
           Item number {{ item }}
@@ -26,6 +34,7 @@
   const infiniteScrollRef = useTemplateRef('scroll')
 
   const items = ref([])
+  const showEmptyText = ref(false)
 
   let firstId = 0
   let lastId = 0
@@ -80,6 +89,7 @@
     data: () => {
       return {
         items: [],
+        showEmptyText: false,
         serverItems: Array.from({ length: 30 }, () => ++lastId),
       }
     },

packages/docs/src/pages/en/components/infinite-scroller.md

@@ -144,7 +144,7 @@ The **error** slot is shown if the status `'error'` is returned from the `done`
 The `v-infinite-scroll` component exposes the `reset()` method, allowing to programatically reset the status to the default after reaching the `empty` state. This makes it possible for load to be called again.
 An optional 'side' parameter can also be provided to the method for cases where only one of the two sides needs to be reset.
 
-<ExamplesExample file="v-infinite-scroll/status-reset" />
+<ExamplesExample file="v-infinite-scroll/misc-reset" />
 
 ### Examples
 

packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass

@@ -1,3 +1,4 @@
+@use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
 
@@ -21,9 +22,11 @@
       width: 100%
 
   .v-infinite-scroll-intersect
+    overflow: hidden
     pointer-events: none
     margin-top: var(--v-infinite-margin)
     margin-bottom: calc(var(--v-infinite-margin) * -1)
+
     &:nth-child(2) // TODO: "1 of &" would be more stable if structure changes
       --v-infinite-margin: var(--v-infinite-margin-size, 1px)
     &:nth-last-child(2)
@@ -34,3 +37,10 @@
     display: flex
     justify-content: center
     padding: $infinite-scroll-side-padding
+    transition-property: padding
+    transition-duration: settings.$transition-duration-root
+    transition-timing-function: settings.$standard-easing
+
+    &:empty,
+    &:has(> div:only-child:empty)
+      padding: 0

packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx

@@ -304,9 +304,11 @@ export const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({
       setStatus(effectiveSide, 'ok')
 
       nextTick(() => {
-        setScrollAmount(
-          getScrollSize() - previousScrollSize + getScrollAmount(),
-        )
+        if (effectiveSide !== 'end') {
+          setScrollAmount(
+            getScrollSize() - previousScrollSize + getScrollAmount(),
+          )
+        }
         if (props.mode !== 'manual') {
           nextTick(() => {
             // See #17475