chore: Nuxt 4 upgrade (#7426)

frontend/app/components/global/AppLoader.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="mx-auto my-3 justify-center"
+    style="display: flex;"
+  >
+    <div style="display: inline;">
+      <v-progress-circular
+        :width="size.width"
+        :size="size.size"
+        color="primary-lighten-2"
+        indeterminate
+      >
+        <div class="text-center">
+          <v-icon
+            :size="size.icon"
+            color="primary-lighten-2"
+          >
+            {{ $globals.icons.primary }}
+          </v-icon>
+          <div
+            v-if="large"
+            class="text-small"
+          >
+            <slot>
+              {{ (small || tiny) ? "" : waitingText }}
+            </slot>
+          </div>
+        </div>
+      </v-progress-circular>
+      <div
+        v-if="!large"
+        class="text-small"
+      >
+        <slot>
+          {{ (small || tiny) ? "" : waitingTextCalculated }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  tiny: {
+    type: Boolean,
+    default: false,
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  medium: {
+    type: Boolean,
+    default: true,
+  },
+  large: {
+    type: Boolean,
+    default: false,
+  },
+  waitingText: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const size = computed(() => {
+  if (props.tiny) {
+    return {
+      width: 2,
+      icon: 0,
+      size: 25,
+    };
+  }
+  if (props.small) {
+    return {
+      width: 2,
+      icon: 30,
+      size: 50,
+    };
+  }
+  else if (props.large) {
+    return {
+      width: 4,
+      icon: 120,
+      size: 200,
+    };
+  }
+  return {
+    width: 3,
+    icon: 75,
+    size: 125,
+  };
+});
+
+const i18n = useI18n();
+const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
+</script>