perf(QInfiniteScroll): force stop all svg animations in the "loading"…

… slot when slot is not on screen #15094
quasarframework · Jan 11, 2023 · c04fde3 · c04fde3
1 parent 7df403d
commit c04fde3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/ui/dev/src/pages/components/infinite-scroll.vue b/ui/dev/src/pages/components/infinite-scroll.vue
@@ -21,7 +21,7 @@
 
           <template v-slot:loading>
             <div class="row justify-center q-my-md">
-              <q-spinner color="primary" name="dots" :size="40" />
+              <q-spinner-dots color="primary" :size="40" />
             </div>
           </template>
         </q-infinite-scroll>
@@ -41,7 +41,7 @@
 
           <template v-slot:loading>
             <div class="row justify-center q-my-md">
-              <q-spinner color="primary" name="dots" :size="40" />
+              <q-spinner-dots color="primary" :size="40" />
             </div>
           </template>
         </q-infinite-scroll>
@@ -54,7 +54,7 @@
         <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>
 

diff --git a/ui/src/components/infinite-scroll/QInfiniteScroll.js b/ui/src/components/infinite-scroll/QInfiniteScroll.js
@@ -39,6 +39,7 @@ export default createComponent({
     const isFetching = ref(false)
     const isWorking = ref(true)
     const rootRef = ref(null)
+    const loadingRef = ref(null)
 
     let index = props.initialIndex || 0
     let localScrollTarget, poll
@@ -170,12 +171,23 @@ export default createComponent({
       }
     }
 
+    // we need to pause svg animations (if any) otherwise
+    // the browser will keep on recalculating the style
+    watch(isFetching, val => {
+      if (loadingRef.value !== null) {
+        const action = `${ val === true ? 'un' : '' }pauseAnimations`
+        Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]()
+        })
+      }
+    })
+
     watch(() => props.disable, val => {
       if (val === true) { stop() }
       else { resume() }
     })
 
-    watch(() => props.reverse, val => {
+    watch(() => props.reverse, () => {
       if (isFetching.value === false && isWorking.value === true) {
         immediatePoll()
       }
@@ -206,7 +218,6 @@ export default createComponent({
 
     onMounted(() => {
       setDebounce(props.debounce)
-
       updateScrollTarget()
     })
 
@@ -222,7 +233,7 @@ export default createComponent({
 
       if (props.disable !== true && isWorking.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
-          h('div', { class: classes.value }, hSlot(slots.loading))
+          h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.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