fix(VLazy): properly show transition on activation

also fixed bad class and onObserve process

Author: johnleider

packages/vuetify/src/components/VLazy/VLazy.ts

@@ -44,35 +44,41 @@ export default mixins(Toggleable).extend({
 
   methods: {
     genContent () {
-      if (!this.isActive) return undefined
-
       const slot = getSlot(this)
 
       /* istanbul ignore if */
       if (!this.transition) return slot
 
+      const children = []
+
+      if (this.isActive) children.push(slot)
+
       return this.$createElement('transition', {
         props: { name: this.transition },
-      }, slot)
+      }, children)
     },
-    onObserve (entries: IntersectionObserverEntry[]) {
+    onObserve (
+      entries: IntersectionObserverEntry[],
+      observer: IntersectionObserver,
+      isIntersecting: boolean,
+    ) {
       if (this.isActive) return
 
-      this.isActive = Boolean(entries.find(entry => entry.isIntersecting))
+      this.isActive = isIntersecting
     },
   },
 
   render (h): VNode {
     return h('div', {
-      staticClass: 'v-observe',
+      staticClass: 'v-lazy',
       attrs: this.$attrs,
       directives: [{
         name: 'intersect',
         value: {
           handler: this.onObserve,
           options: this.options,
         },
-      }] as any,
+      }],
       on: this.$listeners,
       style: this.styles,
     }, [this.genContent()])

packages/vuetify/src/components/VLazy/__tests__/VLazy.spec.ts

@@ -51,27 +51,18 @@ describe('VLazy.ts', () => {
 
     expect(wrapper.vm.isActive).toBeFalsy()
 
-    wrapper.vm.onObserve([
-      { isIntersecting: false },
-      { isIntersecting: false },
-      { isIntersecting: false },
-    ] as IntersectionObserverEntry[])
+    const entries = [] as IntersectionObserverEntry[]
+    const observer = {} as IntersectionObserver
+
+    wrapper.vm.onObserve(entries, observer, false)
 
     expect(wrapper.vm.isActive).toBeFalsy()
 
-    wrapper.vm.onObserve([
-      { isIntersecting: false },
-      { isIntersecting: false },
-      { isIntersecting: true },
-    ] as IntersectionObserverEntry[])
+    wrapper.vm.onObserve(entries, observer, true)
 
     expect(wrapper.vm.isActive).toBeTruthy()
 
-    wrapper.vm.onObserve([
-      { isIntersecting: false },
-      { isIntersecting: false },
-      { isIntersecting: false },
-    ] as IntersectionObserverEntry[])
+    wrapper.vm.onObserve(entries, observer, false)
 
     expect(wrapper.vm.isActive).toBeTruthy()
   })

packages/vuetify/src/components/VLazy/__tests__/__snapshots__/VLazy.spec.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VLazy.ts should conditionally render content 1`] = `
-<div class="v-observe">
+<div class="v-lazy">
 </div>
 `;
 
 exports[`VLazy.ts should conditionally render content 2`] = `
-<div class="v-observe">
+<div class="v-lazy">
   <div>
     foobar
   </div>