# Page Preloader / Loading Animation - Quick Start Guide

## 📌 Overview

Preloader animation telah ditambahkan ke halaman mobile untuk memberikan **feedback visual** kepada user saat halaman sedang loading atau navigasi.

**Status:** ✅ Production Ready
**No Setup Required:** Langsung bisa digunakan!

---

## 🚀 Quick Start (3 Menit)

### 1️⃣ Cara Kerja (Otomatis)

```
User klik link/form
        ↓
Preloader muncul
        ↓
Halaman load
        ↓
Preloader otomatis hilang
```

### 2️⃣ Apa yang Sudah Ditambahkan

- ✅ Modal loading overlay
- ✅ 4 spinner style berbeda
- ✅ Animated loading text
- ✅ Auto show/hide
- ✅ Manual control API

### 3️⃣ Langsung Pakai!

Tidak perlu setup, sudah otomatis bekerja untuk semua link dan form.

---

## 📚 Documentation Index

### Untuk Pengguna Biasa:

1. **Bagian ini** - Quick start guide
2. Lihat: [`PAGE_PRELOADER_DOCUMENTATION.md`](PAGE_PRELOADER_DOCUMENTATION.md)
    - Penjelasan lengkap cara kerja
    - Cara disable untuk element tertentu
    - Troubleshooting

### Untuk Developer:

3. Lihat: [`PRELOADER_ADVANCED_EXAMPLES.md`](PRELOADER_ADVANCED_EXAMPLES.md)
    - 15+ contoh kode
    - API reference
    - Custom implementation

4. Lihat: [`PRELOADER_IMPLEMENTATION_SUMMARY.txt`](PRELOADER_IMPLEMENTATION_SUMMARY.txt)
    - Technical implementation details
    - File yang dimodifikasi
    - Performance metrics

---

## 🎯 Common Use Cases

### ✓ Navigation Links

```html
<a href="/dashboard">Dashboard</a>
<!-- Preloader akan muncul -->
```

### ✓ Form Submission

```html
<form action="/save" method="POST">
    <button type="submit">Save</button>
</form>
<!-- Preloader akan muncul saat submit -->
```

### ✓ AJAX Requests

```javascript
$.ajax({
    url: "/api/data",
    // Preloader otomatis muncul
});
```

### ✓ Disable untuk Anchor Links

```html
<a href="#section" data-no-preloader>Jump to Section</a>
<!-- Preloader tidak akan muncul -->
```

### ✓ Manual Control

```javascript
Preloader.show(); // Tampilkan
Preloader.hide(); // Sembunyikan
```

---

## 🎨 4 Spinner Styles

### 1. Circular (Default) ⟳

```
Modern, rotating circle
Best for: Professional apps
```

### 2. Dots ⚪ ⚫ ⚪

```
Bouncing three dots
Best for: Friendly apps
```

### 3. Pulse ◉

```
Pulsing circle animation
Best for: Calm loading
```

### 4. Bars ▮ ▯ ▮

```
Rotating bars animation
Best for: Strong impression
```

**Mengubah style:**
Edit file: `resources/views/layouts/mobile/app.blade.php`
Cari: `<div class="spinner-circular"></div>`
Ganti dengan style lain.

---

## ⚙️ Configuration

### Default Settings

| Setting      | Value    | Deskripsi         |
| ------------ | -------- | ----------------- |
| Min Duration | 300ms    | Minimum show time |
| Max Duration | 10s      | Failsafe timeout  |
| Spinner      | Circular | Default style     |
| Backdrop     | Blur 2px | Background effect |

### Mengubah Settings

Edit di: `resources/views/layouts/mobile/script.blade.php`

```javascript
minDuration: 300,      // Ubah di sini
autoHideDelay: 10000,  // Atau di sini
```

---

## 📱 Device Support

✅ Desktop (Chrome, Firefox, Safari, Edge)
✅ Tablet (iPad, Android)
✅ Mobile (iOS, Android)
⚠️ IE11 (Partial support - no backdrop blur)

---

## 🔧 File Changes

### Modified Files:

1. **resources/views/layouts/mobile/app.blade.php**
    - Added CSS for preloader (~250 lines)
    - Added HTML preloader component

2. **resources/views/layouts/mobile/script.blade.php**
    - Added JavaScript controller (~100 lines)
    - Auto detection logic

### No files deleted or removed.

### Backward compatible - no breaking changes.

---

## 📊 Performance

- **CSS Size:** ~8KB (minified)
- **JS Size:** ~3KB (minified)
- **Load Impact:** Negligible
- **Runtime:** GPU-accelerated animations
- **Dependencies:** None (jQuery optional for AJAX)

---

## ❓ FAQ

**Q: Bagaimana cara disable preloader?**
A: Tambahkan `data-no-preloader` pada link atau form.

**Q: Preloader stuck?**
A: Auto-hide after 10 detik. Manual: `Preloader.hide()`

**Q: Bisa ganti spinner?**
A: Ya, edit HTML preloader component.

**Q: Support IE11?**
A: Ya, tapi tanpa backdrop blur effect.

**Q: Gimana cara manual control?**
A: Gunakan `Preloader.show()` dan `Preloader.hide()`

---

## 🎯 Next Steps

1. **Test di halaman:** Klik beberapa link lihat preloader muncul
2. **Customize jika perlu:** Ubah spinner style atau text
3. **Deploy:** Langsung ke production, sudah tested

---

## 📞 Need Help?

- Lihat `PAGE_PRELOADER_DOCUMENTATION.md` untuk detail lengkap
- Lihat `PRELOADER_ADVANCED_EXAMPLES.md` untuk contoh kode
- Check browser console untuk debug errors

---

## 📝 Related Files

```
docs/
├── PAGE_PRELOADER_DOCUMENTATION.md      (Full documentation)
├── PRELOADER_ADVANCED_EXAMPLES.md        (Code examples)
├── PRELOADER_IMPLEMENTATION_SUMMARY.txt  (Technical details)
└── PRELOADER_QUICK_START.md              (This file)

Modified:
├── resources/views/layouts/mobile/app.blade.php
└── resources/views/layouts/mobile/script.blade.php
```

---

## ✅ Checklist

- [x] Preloader CSS added
- [x] Preloader HTML added
- [x] Preloader JavaScript added
- [x] Documentation created
- [x] Examples provided
- [x] Testing completed
- [x] Ready for production

---

**Last Updated:** February 22, 2026
**Status:** ✅ Production Ready

---

## 🎉 That's it!

Preloader sudah siap digunakan. Enjoy better UX! 🚀