Resolved a NaN error in role management

ui/src/components/roles/roleView.vue

@@ -12,6 +12,7 @@ import InputGroup from '../ui/input-group/InputGroup.vue'
 import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'
 
 import AddMember from './addMember.vue'
+import Spinner from '../ui/spinner/Spinner.vue'
 
 const route = useRoute()
 
@@ -63,8 +64,8 @@ watch(() => route.params.id, loadRole)
     <AddMember ref="addMemberRef" :all-members="availableMembers" :role="roleData" @submit="loadRole"></AddMember>
     <div class="h-full px-6 py-2">
         <!-- Loading -->
-        <div v-if="loading" class="text-muted-foreground">
+        <div v-if="loading" class="h-full flex items-center justify-center text-muted-foreground">
-            Loading group…
+            <Spinner class="size-8" />
         </div>
 
         <!-- No role selected -->

ui/src/pages/ManageRoles.vue

@@ -113,7 +113,10 @@ async function handleCreateGroup() {
     }
 }
 
-
+const viewingGroup = computed(() => {
+    return route.path.startsWith('/administration/roles/')
+        && route.params.id !== undefined
+})
 
 onMounted(async () => {
     roles.value = await getRoles();
@@ -146,7 +149,12 @@ onMounted(async () => {
 
             </div>
             <div>
-                <RoleView :all-members="allMembers"></RoleView>
+                <RoleView v-if="viewingGroup" :all-members="allMembers" />
+                <div v-else class="h-full flex items-center justify-center">
+                    <p class="text-muted-foreground text-center">
+                        Select a group to manage
+                    </p>
+                </div>
             </div>
         </div>
     </div>