perf(QInfiniteScroll): (backport from Qv2) force stop all svg animati…

…ons in the "loading" slot when slot is not on screen #15094
quasarframework · Jan 11, 2023 · a3da0bb · a3da0bb
1 parent fdf531b
commit a3da0bb
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/ui/dev/src/pages/components/infinite-scroll.vue b/ui/dev/src/pages/components/infinite-scroll.vue
@@ -20,7 +20,7 @@
           </div>
 
           <div slot="loading" class="row justify-center q-my-md">
-            <q-spinner color="primary" name="dots" :size="40" />
+            <q-spinner-dots color="primary" :size="40" />
           </div>
         </q-infinite-scroll>
         <div v-else style="height: 300vh">
@@ -38,7 +38,7 @@
           </div>
 
           <div slot="loading" class="row justify-center q-my-md">
-            <q-spinner color="primary" name="dots" :size="40" />
+            <q-spinner-dots color="primary" :size="40" />
           </div>
         </q-infinite-scroll>
         <div v-else style="height: 300vh">
@@ -50,11 +50,11 @@
         <q-infinite-scroll @load="loadReverse" :disable="disable" :reverse="reverse === false" v-if="active" scroll-target="#reverse-target">
           <template v-slot:loading>
             <div class="row justify-center q-my-md">
-              <q-spinner color="primary" name="dots" size="40px" />
+              <q-spinner-dots color="primary" size="40px" />
             </div>
           </template>
 
-          <div v-for="(item, index) in itemsReverse" :key="itemsReverse.length - index" class="caption">
+          <div v-for="(_, index) in itemsReverse" :key="itemsReverse.length - index" class="caption">
             <q-chip square color="secondary" class="shadow-1">
               {{ itemsReverse.length - index }}
             </q-chip>

diff --git a/ui/src/components/infinite-scroll/QInfiniteScroll.js b/ui/src/components/infinite-scroll/QInfiniteScroll.js
@@ -44,6 +44,12 @@ export default Vue.extend({
     }
   },
 
+  computed: {
+    renderLoadingSlot () {
+      return this.disable !== true && this.isWorking === true
+    }
+  },
+
   watch: {
     disable (val) {
       if (val === true) { this.stop() }
@@ -62,6 +68,14 @@ export default Vue.extend({
 
     debounce (val) {
       this.__setDebounce(val)
+    },
+
+    isFetching () {
+      this.__updateSvgAnimations()
+    },
+
+    renderLoadingSlot () {
+      this.__updateSvgAnimations()
     }
   },
 
@@ -183,14 +197,34 @@ export default Vue.extend({
 
         this.__scrollTarget.addEventListener('scroll', this.poll, passive)
       }
+    },
+
+    __updateSvgAnimations (isRetry) {
+      if (this.renderLoadingSlot === true) {
+        const el = this.$refs.loading
+
+        if (!el) {
+          isRetry !== true && this.$nextTick(() => {
+            this.__updateSvgAnimations(true)
+          })
+          return
+        }
+
+        // we need to pause svg animations (if any) when hiding
+        // otherwise the browser will keep on recalculating the style
+        const action = `${ this.isFetching === true ? 'un' : '' }pauseAnimations`
+        Array.from(el.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]()
+        })
+      }
     }
   },
 
   mounted () {
     this.immediatePoll = this.poll
     this.__setDebounce(this.debounce)
-
     this.updateScrollTarget()
+    this.isFetching === false && this.__updateSvgAnimations()
   },
 
   activated () {
@@ -212,9 +246,10 @@ export default Vue.extend({
   render (h) {
     const child = uniqueSlot(this, 'default', [])
 
-    if (this.disable !== true && this.isWorking === true) {
+    if (this.renderLoadingSlot === true) {
       child[this.reverse === false ? 'push' : 'unshift'](
         h('div', {
+          ref: 'loading',
           staticClass: 'q-infinite-scroll__loading',
           class: this.isFetching === true ? '' : 'invisible'
         }, slot(this, 'loading'))

diff --git a/ui/src/css/core/visibility.sass b/ui/src/css/core/visibility.sass
@@ -40,8 +40,6 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
-.invisible svg *
-  display: none
 .transparent
   background: transparent !important
 
@@ -164,4 +162,3 @@ body.desktop
   .q-focusable:focus, .q-manual-focusable--focused
     > .q-focus-helper
       opacity: .22
-
diff --git a/ui/src/css/core/visibility.styl b/ui/src/css/core/visibility.styl
@@ -40,8 +40,6 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
-.invisible svg *
-  display: none
 .transparent
   background: transparent !important
 
@@ -163,4 +161,3 @@ body.desktop
   .q-focusable:focus, .q-manual-focusable--focused
     > .q-focus-helper
       opacity: .22
-