feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/components/common/LoadingSkeleton.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @file LoadingSkeleton.vue
+ * @description คอมโพเนนต์ Skeleton สำหรับแสดงโครงร่างหน้าจอระหว่างรอโหลดข้อมูล (Loading Skeleton Component)
+ */
 defineProps<{
   type?: 'text' | 'avatar' | 'card' | 'button'
   width?: string
@@ -9,6 +13,7 @@ defineProps<{
 
 <template>
   <div class="skeleton-wrapper">
+    <!-- กรณีเป็นโครงร่างประเภทการ์ด (Card type skeleton) -->
     <template v-if="type === 'card'">
       <div v-for="i in (count || 1)" :key="i" class="skeleton-card">
         <div class="skeleton skeleton-image"/>
@@ -20,14 +25,17 @@ defineProps<{
       </div>
     </template>
     
+    <!-- กรณีเป็นโครงร่างประเภทรูปโปรไฟล์ (Avatar type skeleton) -->
     <template v-else-if="type === 'avatar'">
       <div class="skeleton skeleton-avatar"/>
     </template>
     
+    <!-- กรณีเป็นโครงร่างประเภทปุ่มกด (Button type skeleton) -->
     <template v-else-if="type === 'button'">
       <div class="skeleton skeleton-button" :style="{ width: width || '120px' }"/>
     </template>
     
+    <!-- กรณีอื่นๆ จะแสดงเป็นบรรทัดข้อความ (Fallback/Text type skeleton) -->
     <template v-else>
       <div 
         v-for="i in (count || 1)"