Showing spinner when loading nodes.

frontend/src/components/LoadingContainer.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import Spinner from "@/components/Spinner.vue";
+
+const props = defineProps({
+    loading: {
+        type: Boolean,
+        required: true,
+    }
+});
+</script>
+
+<template>
+    <div :class="{ 'loading-container': true, loading: loading }">
+        <Spinner class="spinner" v-if="loading" />
+        <div class="content" v-if="!loading">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../scss/variables";
+
+.loading-container {
+    position: relative;
+
+    padding: 0;
+    margin: 0;
+
+    &.loading {
+        height: 10em;
+    }
+}
+
+</style>

frontend/src/components/Spinner.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="spinner-container">
+        <div class="spinner">
+            <i class="fa fa-refresh fa-spin fa-3x" aria-hidden="true" />
+            <span class="sr-only">Lädt...</span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../scss/variables";
+
+.spinner-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: $page-text-color;
+}
+</style>