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>

frontend/src/stores/nodes.ts

@@ -38,7 +38,6 @@ export const useNodesStore = defineStore({
     },
     actions: {
         async refresh(page: number, nodesPerPage: number): Promise<void> {
-            // TODO: Handle paging
             const result = await internalApi.getPagedList<EnhancedNode>(
                 "nodes",
                 isEnhancedNode,

frontend/src/views/AdminNodesView.vue

@@ -3,17 +3,28 @@ import {useNodesStore} from "@/stores/nodes";
 import {onMounted, ref} from "vue";
 import type {EnhancedNode, MAC} from "@/types";
 import Pager from "@/components/Pager.vue";
+import LoadingContainer from "@/components/LoadingContainer.vue";
+
+const NODE_PER_PAGE = 50;
 
 type NodeRedactField = "nickname" | "email" | "token";
 type NodeRedactFieldsMap = Partial<Record<NodeRedactField, boolean>>;
-type NodesRedactFieldsMap = Partial<Record<MAC, NodeRedactFieldsMap>>;
 
+type NodesRedactFieldsMap = Partial<Record<MAC, NodeRedactFieldsMap>>;
 const nodes = useNodesStore();
 const redactFieldsByDefault = ref(true);
 const nodesRedactFieldsMap = ref({} as NodesRedactFieldsMap)
 
+const loading = ref(false);
+
 async function refresh(page: number): Promise<void> {
-    await nodes.refresh(page, 50);
+    loading.value = true;
+    redactAllFields(true);
+    try {
+        await nodes.refresh(page, NODE_PER_PAGE);
+    } finally {
+        loading.value = false;
+    }
 }
 
 function redactAllFields(shallRedactFields: boolean): void {
@@ -65,6 +76,7 @@ onMounted(async () => await refresh(1));
         :totalItems="nodes.getTotalNodes"
         @changePage="refresh"/>
 
+    <LoadingContainer :loading="loading">
         <table>
             <thead>
             <tr>
@@ -178,6 +190,7 @@ onMounted(async () => await refresh(1));
             </tr>
             </tbody>
         </table>
+    </LoadingContainer>
 
     <Pager
         :page="nodes.getPage"
@@ -188,6 +201,7 @@ onMounted(async () => await refresh(1));
 
 <style lang="scss" scoped>
 @import "../scss/variables";
+
 table {
     border-collapse: collapse;