Make vl project user fetching a hoc

src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(pages)/team/page.tsx

@@ -1,9 +1,17 @@
+'use client';
+
 import VirtualLabTeamTable from '@/components/VirtualLab/VirtualLabTeamTable';
+import withVirtualLabProjectUsers from '@/components/VirtualLab/data/WithVirtualLabProjectUsers';
 import { ServerSideComponentProp } from '@/types/common';
 
 export default function VirtualLabProjectTeamPage({
   params,
 }: ServerSideComponentProp<{ virtualLabId: string; projectId: string }>) {
   const { virtualLabId, projectId } = params;
-  return <VirtualLabTeamTable virtualLabId="to-be-replaced-by-actual-id" />;
+  const WithVirtualLabProjectUsers = withVirtualLabProjectUsers(
+    VirtualLabTeamTable,
+    virtualLabId,
+    projectId
+  );
+  return <WithVirtualLabProjectUsers />;
 }

src/components/VirtualLab/data/WithVirtualLabProjectUsers.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
+import { useAtomValue } from 'jotai';
+import { loadable } from 'jotai/utils';
+import { ComponentType } from 'react';
+
+import { VirtualLabMember } from '@/types/virtual-lab/members';
+import { virtualLabProjectUsersAtomFamily } from '@/state/virtual-lab/projects';
+
+type WithVirtualLabUsersProps = {
+  users: VirtualLabMember[];
+};
+
+export default function withVirtualLabProjectUsers(
+  WrappedComponent: ComponentType<WithVirtualLabUsersProps>,
+  virtualLabId: string,
+  projectId: string
+) {
+  function WithVirtualLabProjectUsers() {
+    const projectMembers = useAtomValue(
+      loadable(virtualLabProjectUsersAtomFamily({ virtualLabId, projectId }))
+    );
+    if (projectMembers.state === 'loading') {
+      return (
+        <div className="flex h-screen items-center justify-center">
+          <Spin size="large" indicator={<LoadingOutlined />} />
+        </div>
+      );
+    }
+    if (projectMembers.state === 'hasError') {
+      return (
+        <div className="flex h-screen items-center justify-center">
+          <div className="rounded-lg border p-8">
+            Something went wrong when fetching virtual lab project users
+          </div>
+        </div>
+      );
+    }
+    return <WrappedComponent users={projectMembers.data} />;
+  }
+  return WithVirtualLabProjectUsers;
+}