tweaked member page sizing

ui/src/pages/memberList.vue

@@ -31,12 +31,15 @@ import { useRouter } from 'vue-router';
 import { Ellipsis } from "lucide-vue-next";
 import Input from "@/components/ui/input/Input.vue";
 import LoaForm from "@/components/loa/loaForm.vue";
+import Spinner from "@/components/ui/spinner/Spinner.vue";
 
 const members = ref<Member[]>([]);
 const router = useRouter();
 
+const loaded = ref(false);
 const fetchMembers = async () => {
     members.value = await getMembers();
+    loaded.value = true;
 };
 
 function viewMember(id) {
@@ -56,15 +59,15 @@ const searchedMembers = computed(() => {
 
     <!-- table menu -->
     <div class="w-4xl mx-auto">
-        <div class="flex flex-row items-center justify-between">
+        <div class="flex flex-row items-center justify-between my-5 mt-7">
             <div class="flex items-center justify-between">
-                <p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Member Management</p>
+                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Member Management</p>
             </div>
             <div class="flex justify-between items-center gap-3 mb-4">
                 <Input v-model="searchVal" placeholder="Search Members..."></Input>
             </div>
         </div>
-        <Table>
+        <Table class="h-10">
             <TableHeader>
                 <TableRow>
                     <TableHead class="w-[100px]">
@@ -75,6 +78,10 @@ const searchedMembers = computed(() => {
                     <TableHead>Status</TableHead>
                 </TableRow>
             </TableHeader>
+        </Table>
+
+        <div class="max-h-[60vh] overflow-y-auto scrollbar-themed">
+            <Table v-if="loaded">
                 <TableBody>
                     <TableRow v-for="member in searchedMembers" :key="member.member_id">
                         <TableCell class="font-medium">
@@ -101,5 +108,10 @@ const searchedMembers = computed(() => {
                     </TableRow>
                 </TableBody>
             </Table>
+            <div v-else class="flex justify-center my-[30vh]">
+                <Spinner class="size-10"></Spinner>
+            </div>
+        </div>
+
     </div>
 </template>