diff --git a/ui/dev/src/pages/components/infinite-scroll.vue b/ui/dev/src/pages/components/infinite-scroll.vue
index 4db39949843..7a564ccd952 100644
--- a/ui/dev/src/pages/components/infinite-scroll.vue
+++ b/ui/dev/src/pages/components/infinite-scroll.vue
@@ -21,7 +21,7 @@
-
+
@@ -41,7 +41,7 @@
-
+
@@ -54,7 +54,7 @@
-
+
diff --git a/ui/src/components/infinite-scroll/QInfiniteScroll.js b/ui/src/components/infinite-scroll/QInfiniteScroll.js
index 5c73cc30a0b..a623e8e2d26 100644
--- 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
index 44a9a71257b..702433ce6ae 100644
--- 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