Blink entities body upon update

This commit is contained in:
Fabio Manganiello 2022-11-13 01:39:40 +01:00
parent 24f5a8283c
commit 833d908a32
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="row item entity-container"> <div class="row item entity-container" :class="{blink: justUpdated}">
<component :is="component" <component :is="component"
:value="value" :value="value"
:loading="loading" :loading="loading"
@ -22,6 +22,7 @@ export default {
data() { data() {
return { return {
component: null, component: null,
justUpdated: false,
} }
}, },
@ -31,6 +32,15 @@ export default {
t[0].toUpperCase() + t.slice(1) t[0].toUpperCase() + t.slice(1)
).join('') ).join('')
this.$watch(
() => this.value,
() => {
this.justUpdated = true
const self = this;
setTimeout(() => self.justUpdated = false, 1000)
}
)
this.component = defineAsyncComponent( this.component = defineAsyncComponent(
() => import(`@/components/panels/Entities/${type}`) () => import(`@/components/panels/Entities/${type}`)
) )
@ -47,4 +57,14 @@ export default {
position: relative; position: relative;
padding: 0 !important; padding: 0 !important;
} }
.blink {
animation: blink-animation 1s steps(20, start);
}
@keyframes blink-animation {
to {
background: $active-bg;
}
}
</style> </style>