✨ Replace circular with linear loading indicator

src/components/day-carousel.vue

@@ -26,7 +26,11 @@ const loadedDates = ref([
 
 // Load left or right date on slide change
 function slideChange(swiper) {
-  selectedDate.value = loadedDates.value[swiper.activeIndex];
+  // Only trigger data refresh if date is different
+  const newSelectedDate = loadedDates.value[swiper.activeIndex];
+  if (selectedDate.value.getTime() != newSelectedDate.getTime())
+    selectedDate.value = newSelectedDate;
+
   const activeSlide = swiper.activeIndex;
   if (activeSlide == loadedDates.value.length - 1) {
     const lastDate = loadedDates.value[loadedDates.value.length - 1];

src/components/loading-element.vue

@@ -1,54 +1,73 @@
 <script setup>
-defineProps({
+import { ref, watch } from "vue";
+const props = defineProps({
   active: {
     required: true,
     type: Boolean,
   },
+  progress: {
+    default: 0,
+    type: Number,
+  },
+  error: {
+    default: false,
+    type: Boolean,
+  },
 });
+
+const computedProgress = ref(0);
+const visible = ref(true);
+var hideTimeout;
+watch(
+  () => props.progress,
+  () => {
+    if (visible.value) computedProgress.value = props.progress;
+  }
+);
+watch(
+  () => props.active,
+  () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = undefined;
+    }
+    if (props.active) {
+      visible.value = true;
+      computedProgress.value = props.progress;
+    } else {
+      hideTimeout = setTimeout(() => {
+        if (!props.active) {
+          visible.value = false;
+          computedProgress.value = 0;
+        }
+      }, 500);
+    }
+  }
+);
 </script>
 
 <template>
-  <div class="container" :class="active ? 'active' : ''">
-    <span class="loader"></span>
-  </div>
+  <div
+    class="bar"
+    :class="(active ? 'active' : '') + (error ? ' error' : '')"
+    :style="`width: ${computedProgress * 100}%;`"
+  ></div>
 </template>
 
 <style scoped>
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  background-color: var(--bg-color);
-  height: 0px;
-  margin: 0px;
+.bar {
+  width: 0%;
   opacity: 0;
-  transition: all 0.8s;
-  transition-delay: 0.2s;
+  background-color: var(--loader-color);
+  height: 5px;
+  transition: 0.5s;
+  transition-property: width opacity background-color;
 }
 
-.container.active {
-  height: 100px;
+.bar.active {
   opacity: 1;
 }
-
-.loader {
-  width: 48px;
-  height: 48px;
-  border: 5px solid;
-  border-color: var(--loader-color) transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.bar.error {
+  background-color: var(--loader-error-color);
 }
 </style>