make sure we have a default slot in when visible before running it

inertiajs · Nov 20, 2024 · 350262f · 350262f
1 parent 9106d74
commit 350262f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/packages/react/test-app/Pages/WhenVisible.jsx b/packages/react/test-app/Pages/WhenVisible.jsx
@@ -23,5 +23,9 @@ export default () => (
         <Foo label="Third one is visible!" />
       </WhenVisible>
     </div>
+
+    <div style={{ marginTop: '5000px' }}>
+      <WhenVisible data="foo" fallback={<div>Loading fourth one...</div>}></WhenVisible>
+    </div>
   </>
 )
diff --git a/packages/svelte/test-app/Pages/WhenVisible.svelte b/packages/svelte/test-app/Pages/WhenVisible.svelte
@@ -31,3 +31,11 @@
     <div>Third one is visible!</div>
   </WhenVisible>
 </div>
+
+<div style="margin-top: 5000px">
+  <WhenVisible data="foo">
+    <svelte:fragment slot="fallback">
+      <div>Loading fourth one...</div>
+    </svelte:fragment>
+  </WhenVisible>
+</div>
diff --git a/packages/vue3/src/whenVisible.ts b/packages/vue3/src/whenVisible.ts
@@ -94,10 +94,10 @@ export default defineComponent({
       els.push(h(this.$props.as))
     }
 
-    if (this.loaded) {
-      els.push(this.$slots.default())
-    } else {
+    if (!this.loaded) {
       els.push(this.$slots.fallback ? this.$slots.fallback() : null)
+    } else if (this.$slots.default) {
+      els.push(this.$slots.default())
     }
 
     return els

diff --git a/packages/vue3/test-app/Pages/WhenVisible.vue b/packages/vue3/test-app/Pages/WhenVisible.vue
@@ -32,4 +32,12 @@ import { WhenVisible } from '@inertiajs/vue3'
       <div>Third one is visible!</div>
     </WhenVisible>
   </div>
+
+  <div style="margin-top: 5000px">
+    <WhenVisible data="foo">
+      <template #fallback>
+        <div>Loading fourth one...</div>
+      </template>
+    </WhenVisible>
+  </div>
 </template>
diff --git a/tests/when-visible.spec.ts b/tests/when-visible.spec.ts
@@ -16,7 +16,9 @@ test('it will wait to fire the reload until element is visible', async ({ page }
 
   await page.evaluate(() => (window as any).scrollTo(0, 5000))
   await expect(page.getByText('Loading first one...')).toBeVisible()
+  await expect(page.getByText('First one is visible!')).not.toBeVisible()
   await page.waitForResponse(page.url())
+  await expect(page.getByText('Loading first one...')).not.toBeVisible()
   await expect(page.getByText('First one is visible!')).toBeVisible()
 
   // Scroll back up and then back down, make sure we don't re-request
@@ -35,13 +37,17 @@ test('it will wait to fire the reload until element is visible', async ({ page }
   // This one has a buffer of 1000
   await page.evaluate(() => (window as any).scrollTo(0, 9000))
   await expect(page.getByText('Loading second one...')).toBeVisible()
+  await expect(page.getByText('Second one is visible!')).not.toBeVisible()
   await page.waitForResponse(page.url())
+  await expect(page.getByText('Loading second one...')).not.toBeVisible()
   await expect(page.getByText('Second one is visible!')).toBeVisible()
 
   // This one should trigger every time it's visible
   await page.evaluate(() => (window as any).scrollTo(0, 15_000))
   await expect(page.getByText('Loading third one...')).toBeVisible()
+  await expect(page.getByText('Third one is visible!')).not.toBeVisible()
   await page.waitForResponse(page.url())
+  await expect(page.getByText('Loading third one...')).not.toBeVisible()
   await expect(page.getByText('Third one is visible!')).toBeVisible()
 
   // Now scroll up and down to re-trigger it
@@ -58,4 +64,9 @@ test('it will wait to fire the reload until element is visible', async ({ page }
   await page.evaluate(() => (window as any).scrollTo(0, 15_000))
   await expect(page.getByText('Third one is visible!')).toBeVisible()
   await page.waitForResponse(page.url())
+
+  await page.evaluate(() => (window as any).scrollTo(0, 20_000))
+  await expect(page.getByText('Loading fourth one...')).toBeVisible()
+  await page.waitForResponse(page.url())
+  await expect(page.getByText('Loading fourth one...')).not.toBeVisible()
 })