diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss index b15fe57..e756930 100644 --- a/server/ui-src/assets/styles.scss +++ b/server/ui-src/assets/styles.scss @@ -75,16 +75,34 @@ left: 0; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.4); z-index: 1500; + cursor: wait; + + .loader-bar { + width: 35%; + height: 2px; + background: $success; + border-radius: 0 999px 999px 0; + animation: loader-slide 1.2s ease-in-out 200ms infinite backwards; + } +} + +@keyframes loader-slide { + 0% { + transform: translateX(-100%); + } + + 50% { + transform: translateX(110vw); + } + + 100% { + transform: translateX(110vw); + } } // dark mode adjustments @include color-mode(dark) { - .loader { - background: rgba(0, 0, 0, 0.4); - } - .token.tag, .token.property { color: #ee6969; diff --git a/server/ui-src/components/AjaxLoader.vue b/server/ui-src/components/AjaxLoader.vue index 363f053..a8eec0a 100644 --- a/server/ui-src/components/AjaxLoader.vue +++ b/server/ui-src/components/AjaxLoader.vue @@ -10,11 +10,7 @@ export default { diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue index 89df963..3e5eebc 100644 --- a/server/ui-src/views/MessageView.vue +++ b/server/ui-src/views/MessageView.vue @@ -134,7 +134,6 @@ export default { methods: { loadMessage() { - this.message = false; const uri = this.resolve("/api/v1/message/" + this.$route.params.id); this.get( uri, @@ -605,8 +604,13 @@ export default { > - - + +