delete: delete trash logo on /dosen/course_id page

resources/css/app.css

@@ -320,7 +320,54 @@ @layer base {
     }
 }
 
+@keyframes app-loading-dot {
+    0%,
+    80%,
+    100% {
+        opacity: 0.24;
+        transform: translateY(0);
+    }
+
+    40% {
+        opacity: 1;
+        transform: translateY(-0.12rem);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-loading-dot {
+        animation: none !important;
+        opacity: 1;
+        transform: none;
+    }
+}
+
 @layer components {
+    .app-loading-indicator {
+        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap;
+    }
+
+    .app-loading-spinner {
+        @apply shrink-0;
+    }
+
+    .app-loading-dots {
+        @apply inline-flex min-w-[1.05em] items-center justify-start;
+    }
+
+    .app-loading-dot {
+        animation: app-loading-dot 1.2s infinite ease-in-out both;
+        line-height: 1;
+    }
+
+    .app-loading-dot:nth-child(2) {
+        animation-delay: 0.16s;
+    }
+
+    .app-loading-dot:nth-child(3) {
+        animation-delay: 0.32s;
+    }
+
     .welcome-shell {
         @apply relative flex min-h-svh items-center justify-center px-4 py-8 sm:px-6;
         background-color: var(--welcome-shell-bg);
@@ -1884,29 +1931,6 @@ @layer components {
         color: var(--lecturer-primary);
     }
 
-    .lecturer-document-actions {
-        @apply ml-auto flex shrink-0 items-center gap-3;
-    }
-
-    .lecturer-document-delete {
-        @apply inline-flex size-8 items-center justify-center rounded-[7px] transition-colors outline-none focus-visible:ring-2;
-        color: var(--lecturer-muted);
-        --tw-ring-color: color-mix(
-            in oklab,
-            var(--lecturer-primary) 45%,
-            transparent
-        );
-    }
-
-    .lecturer-document-delete:hover {
-        background-color: color-mix(
-            in oklab,
-            var(--lecturer-danger) 10%,
-            var(--lecturer-surface)
-        );
-        color: var(--lecturer-danger);
-    }
-
     .lecturer-detail-empty {
         @apply rounded-[10px] border px-5 py-8 text-center text-sm;
         background-color: var(--lecturer-surface);
@@ -1971,9 +1995,5 @@ @layer components {
         .lecturer-document-content {
             @apply flex-col;
         }
-
-        .lecturer-document-actions {
-            @apply ml-0 w-full justify-between;
-        }
     }
 }

resources/js/components/auth/register-role-form.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import { authApi, getAuthErrorMessage } from '@/lib/auth';
 import { register } from '@/routes';
 
@@ -357,7 +358,14 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                                 disabled={isProcessing}
                                 data-test="register-role-button"
                             >
-                                Register
+                                {isProcessing ? (
+                                    <LoadingIndicator
+                                        label="Mendaftar"
+                                        spinnerClassName="size-3.5"
+                                    />
+                                ) : (
+                                    'Register'
+                                )}
                             </Button>
                         </form>
 

resources/js/components/student/question-composer.tsx

@@ -10,6 +10,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { Spinner } from '@/components/ui/spinner';
 import type { CourseResponse } from '@/lib/rag';
 import { cn } from '@/lib/utils';
 
@@ -118,7 +119,11 @@ export function QuestionComposer({
                         size="icon"
                         type="submit"
                     >
-                        <Send className="size-5" />
+                        {isProcessing ? (
+                            <Spinner className="size-5" />
+                        ) : (
+                            <Send className="size-5" />
+                        )}
                     </Button>
                 </form>
             </CardContent>

resources/js/components/student/student-shell.tsx

@@ -20,6 +20,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import {
     Sidebar,
     SidebarContent,
@@ -250,7 +251,10 @@ function StudentSidebar({
                                                         <Clock3 className="student-history-menu-icon size-4" />
                                                         <span className="student-history-copy">
                                                             <span className="student-history-title">
-                                                                Memuat riwayat
+                                                                <LoadingIndicator
+                                                                    label="Memuat riwayat"
+                                                                    spinnerClassName="size-3"
+                                                                />
                                                             </span>
                                                         </span>
                                                     </SidebarMenuButton>
@@ -421,7 +425,14 @@ function StudentSidebar({
                             }}
                             type="button"
                         >
-                            {isDeletingSession ? 'Menghapus...' : 'Hapus'}
+                            {isDeletingSession ? (
+                                <LoadingIndicator
+                                    label="Menghapus"
+                                    spinnerClassName="size-3.5"
+                                />
+                            ) : (
+                                'Hapus'
+                            )}
                         </Button>
                     </DialogFooter>
                 </DialogContent>

resources/js/components/ui/loading-indicator.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps } from 'react';
+
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+
+type LoadingIndicatorProps = ComponentProps<'span'> & {
+    label?: string;
+    showSpinner?: boolean;
+    spinnerClassName?: string;
+};
+
+function LoadingDots({ className }: { className?: string }) {
+    return (
+        <span aria-hidden="true" className={cn('app-loading-dots', className)}>
+            <span className="app-loading-dot">.</span>
+            <span className="app-loading-dot">.</span>
+            <span className="app-loading-dot">.</span>
+        </span>
+    );
+}
+
+function LoadingIndicator({
+    className,
+    label = 'Memuat',
+    showSpinner = true,
+    spinnerClassName,
+    ...props
+}: LoadingIndicatorProps) {
+    return (
+        <span
+            aria-live="polite"
+            className={cn('app-loading-indicator', className)}
+            role="status"
+            {...props}
+        >
+            {showSpinner && (
+                <Spinner
+                    aria-hidden="true"
+                    className={cn('app-loading-spinner', spinnerClassName)}
+                    role="presentation"
+                />
+            )}
+            {label && <span>{label}</span>}
+            <LoadingDots />
+        </span>
+    );
+}
+
+export { LoadingDots, LoadingIndicator };

resources/js/pages/auth/login.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import { authApi, getAuthErrorMessage, saveAuthSession } from '@/lib/auth';
 import { dashboard, dosen, home, mahasiswa, register } from '@/routes';
 
@@ -137,7 +138,14 @@ export default function Login({ canRegister = true, status }: LoginProps) {
                                 disabled={isProcessing}
                                 data-test="login-button"
                             >
-                                Sign In
+                                {isProcessing ? (
+                                    <LoadingIndicator
+                                        label="Masuk"
+                                        spinnerClassName="size-3.5"
+                                    />
+                                ) : (
+                                    'Sign In'
+                                )}
                             </Button>
                         </form>
 

resources/js/pages/dosen-detail.tsx

@@ -25,6 +25,10 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import {
+    LoadingDots,
+    LoadingIndicator,
+} from '@/components/ui/loading-indicator';
 import { getStoredAuthToken } from '@/lib/auth';
 import type {
     CourseResponse,
@@ -142,19 +146,16 @@ function DocumentCard({ document }: { document: DocumentResponse }) {
                         data-status={statusTone}
                     >
                         <DocumentStatusIcon status={document.status} />
-                        {getStatusLabel(document.status)}
+                        {document.status === 'processing' ? (
+                            <>
+                                <span>Sedang diproses</span>
+                                <LoadingDots />
+                            </>
+                        ) : (
+                            getStatusLabel(document.status)
+                        )}
                     </p>
                 </div>
-
-                <div className="lecturer-document-actions">
-                    <button
-                        aria-label={`Hapus ${document.filename}`}
-                        className="lecturer-document-delete"
-                        type="button"
-                    >
-                        <Trash2 className="size-4" />
-                    </button>
-                </div>
             </CardContent>
         </Card>
     );
@@ -338,11 +339,6 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
     const title =
         course?.title ??
         (isLoading ? 'Memuat mata kuliah...' : 'Detail mata kuliah');
-    const description =
-        course?.description ??
-        (isLoading
-            ? 'Mengambil detail mata kuliah dari backend.'
-            : 'Tidak ada deskripsi mata kuliah.');
 
     return (
         <>
@@ -362,9 +358,26 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
 
                         <div className="lecturer-detail-heading">
                             <div className="lecturer-detail-title-row">
-                                <h1>{title}</h1>
+                                <h1>
+                                    {course?.title ??
+                                        (isLoading ? (
+                                            <LoadingIndicator label="Memuat mata kuliah" />
+                                        ) : (
+                                            'Detail mata kuliah'
+                                        ))}
+                                </h1>
                             </div>
-                            <p>{description}</p>
+                            <p>
+                                {course?.description ??
+                                    (isLoading ? (
+                                        <LoadingIndicator
+                                            label="Mengambil detail mata kuliah"
+                                            showSpinner={false}
+                                        />
+                                    ) : (
+                                        'Tidak ada deskripsi mata kuliah.'
+                                    ))}
+                            </p>
                         </div>
 
                         <div className="lecturer-detail-actions">
@@ -417,9 +430,14 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
                                 )}
                             </span>
                             <span className="lecturer-upload-title">
-                                {isUploading
-                                    ? 'Mengupload dokumen...'
-                                    : 'Upload Dokumen Baru'}
+                                {isUploading ? (
+                                    <LoadingIndicator
+                                        label="Mengupload dokumen"
+                                        showSpinner={false}
+                                    />
+                                ) : (
+                                    'Upload Dokumen Baru'
+                                )}
                             </span>
                             <span className="lecturer-upload-description">
                                 Drag & drop file PDF, PPT, atau TXT di sini.
@@ -440,7 +458,7 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
                             <div className="lecturer-document-list">
                                 {isLoading && (
                                     <p className="lecturer-detail-empty">
-                                        Memuat dokumen...
+                                        <LoadingIndicator label="Memuat dokumen" />
                                     </p>
                                 )}
 
@@ -548,9 +566,14 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
                                     disabled={isUpdatingCourse}
                                     type="submit"
                                 >
-                                    {isUpdatingCourse
-                                        ? 'Menyimpan...'
-                                        : 'Simpan'}
+                                    {isUpdatingCourse ? (
+                                        <LoadingIndicator
+                                            label="Menyimpan"
+                                            spinnerClassName="size-3.5"
+                                        />
+                                    ) : (
+                                        'Simpan'
+                                    )}
                                 </Button>
                             </DialogFooter>
                         </form>
@@ -604,9 +627,14 @@ export default function DosenDetail({ courseId }: DosenDetailProps) {
                                     }}
                                     type="button"
                                 >
-                                    {isDeletingCourse
-                                        ? 'Menghapus...'
-                                        : 'Hapus'}
+                                    {isDeletingCourse ? (
+                                        <LoadingIndicator
+                                            label="Menghapus"
+                                            spinnerClassName="size-3.5"
+                                        />
+                                    ) : (
+                                        'Hapus'
+                                    )}
                                 </Button>
                             </DialogFooter>
                         </div>

resources/js/pages/dosen.tsx

@@ -2,6 +2,7 @@ import { Head, router } from '@inertiajs/react';
 import type { LucideIcon } from 'lucide-react';
 import { AlertTriangle, Database, FileText, Plus, Search } from 'lucide-react';
 import type { FormEvent } from 'react';
+import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import AppearanceToggle from '@/components/appearance-toggle';
@@ -18,6 +19,10 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import {
+    LoadingDots,
+    LoadingIndicator,
+} from '@/components/ui/loading-indicator';
 import { getStoredAuthToken } from '@/lib/auth';
 import type { CourseResponse, DocumentResponse } from '@/lib/rag';
 import { getRagErrorMessage, ragApi } from '@/lib/rag';
@@ -34,7 +39,7 @@ type KnowledgeBaseRow = {
 
 type Metric = {
     label: string;
-    value: string;
+    value: ReactNode;
     description?: string;
     icon: LucideIcon;
     tone: 'primary' | 'danger';
@@ -252,21 +257,33 @@ export default function Dosen() {
                 icon: Database,
                 label: 'Total Knowledge Base',
                 tone: 'primary',
-                value: isLoading ? '...' : String(knowledgeBases.length),
+                value: isLoading ? (
+                    <LoadingDots className="lecturer-metric-loading" />
+                ) : (
+                    String(knowledgeBases.length)
+                ),
             },
             {
                 icon: FileText,
                 label: 'Total Dokumen',
                 description: 'Chunked',
                 tone: 'primary',
-                value: isLoading ? '...' : String(documentCount),
+                value: isLoading ? (
+                    <LoadingDots className="lecturer-metric-loading" />
+                ) : (
+                    String(documentCount)
+                ),
             },
             {
                 icon: AlertTriangle,
                 label: 'Processing Error',
                 description: 'dokumen',
                 tone: 'danger',
-                value: isLoading ? '...' : String(failedDocumentCount),
+                value: isLoading ? (
+                    <LoadingDots className="lecturer-metric-loading" />
+                ) : (
+                    String(failedDocumentCount)
+                ),
             },
         ];
     }, [isLoading, knowledgeBases]);
@@ -360,7 +377,7 @@ export default function Dosen() {
                                                     className="lecturer-table-empty"
                                                     colSpan={4}
                                                 >
-                                                    Memuat knowledge base...
+                                                    <LoadingIndicator label="Memuat knowledge base" />
                                                 </td>
                                             </tr>
                                         )}
@@ -527,9 +544,14 @@ export default function Dosen() {
                                     disabled={isCreatingCourse}
                                     type="submit"
                                 >
-                                    {isCreatingCourse
-                                        ? 'Menyimpan...'
-                                        : 'Simpan'}
+                                    {isCreatingCourse ? (
+                                        <LoadingIndicator
+                                            label="Menyimpan"
+                                            spinnerClassName="size-3.5"
+                                        />
+                                    ) : (
+                                        'Simpan'
+                                    )}
                                 </Button>
                             </DialogFooter>
                         </form>

resources/js/pages/mahasiswa-chat.tsx

@@ -11,6 +11,7 @@ import {
     StudentShell,
     useStoredStudentName,
 } from '@/components/student/student-shell';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import { getStoredAuthToken } from '@/lib/auth';
 import type {
     ChatHistoryResponse,
@@ -455,7 +456,7 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
 
                         {isLoading && messages.length === 0 && !isProcessing ? (
                             <p className="student-chat-loading">
-                                Memuat percakapan...
+                                <LoadingIndicator label="Memuat percakapan" />
                             </p>
                         ) : (
                             <div className="student-chat-messages">
@@ -472,7 +473,10 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                                             <Bot className="size-4" />
                                         </span>
                                         <div className="student-message-bubble student-message-bubble--typing">
-                                            Thinking...
+                                            <LoadingIndicator
+                                                label="Thinking"
+                                                showSpinner={false}
+                                            />
                                         </div>
                                     </article>
                                 )}