platform/lms-adm-fe release promotion snapshot

src/pages/groups/GroupsPage.tsx

@@ -30,6 +30,7 @@ export function GroupsPage({ session, selectedCourseId }: { session: AuthSession
   const [summary, setSummary] = useState<InstructorGroupsSummary>(emptySummary);
   const [unassignedStudents, setUnassignedStudents] = useState<GroupStudentOption[]>([]);
   const [platformOptions, setPlatformOptions] = useState<GroupPlatformOption[]>([]);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [query, setQuery] = useState('');
   const [page, setPage] = useState(1);
@@ -71,6 +72,7 @@ export function GroupsPage({ session, selectedCourseId }: { session: AuthSession
 
   useEffect(() => {
     let cancelled = false;
+    setLoading(true);
     listInstructorGroups(session.accessToken, selectedCourseId || null)
       .then((payload) => {
         if (cancelled) return;
@@ -81,6 +83,9 @@ export function GroupsPage({ session, selectedCourseId }: { session: AuthSession
         setGroups([]);
         setSummary(emptySummary);
         setError(reason.message);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
       });
 
     return () => {
@@ -260,7 +265,12 @@ export function GroupsPage({ session, selectedCourseId }: { session: AuthSession
           </div>
 
           <div className="divide-y divide-[#e2e8f0]">
-          {error ? (
+          {loading ? (
+            <div className="flex h-[220px] items-center justify-center gap-2 px-4 text-center text-[#64748b]">
+              <Loader2 className="animate-spin" size={18} aria-hidden="true" />
+              <span className="text-[13px] font-bold">그룹 목록을 불러오는 중입니다.</span>
+            </div>
+          ) : error ? (
             <div className="flex h-[220px] items-center justify-center px-4 text-center">
               <p className="text-[13px] font-bold text-[#64748b]">{error}</p>
             </div>

src/pages/platforms/PlatformsPage.tsx

@@ -56,6 +56,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
   const [masterPlatforms, setMasterPlatforms] = useState<MasterPlatform[]>([]);
   const [agents, setAgents] = useState<TeachingAgent[]>([]);
   const [summary, setSummary] = useState<InstructorPlatformsSummary>(emptySummary);
+  const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [page, setPage] = useState(1);
@@ -137,6 +138,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
 
   useEffect(() => {
     let cancelled = false;
+    setLoading(true);
     listInstructorPlatforms(session.accessToken)
       .then((payload) => {
         if (!cancelled) applyPayload(payload);
@@ -147,6 +149,9 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
         setMasterPlatforms([]);
         setSummary(emptySummary);
         setError(reason.message);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
       });
 
     return () => {
@@ -426,7 +431,12 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
             </div>
 
             <div className="divide-y divide-[#e2e8f0]">
-              {error ? (
+              {loading ? (
+                <div className="flex h-[220px] items-center justify-center gap-2 px-4 text-center text-[#64748b]">
+                  <Loader2 className="animate-spin" size={18} aria-hidden="true" />
+                  <span className="text-[13px] font-bold">플랫폼 목록을 불러오는 중입니다.</span>
+                </div>
+              ) : error ? (
                 <div className="flex h-[220px] items-center justify-center px-4 text-center">
                   <p className="text-[13px] font-bold text-[#64748b]">{error}</p>
                 </div>