NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

Spinner — indikator memuat

Komponen Spinner dari NexaJS menampilkan indikator aktivitas saat visible benar. Demo mencakup spinner dasar, teks bawah, overlay fullscreen, ukuran small, warna kustom, overlay dengan warna latar semi-transparan, dan baris beberapa spinner kecil tetap berputar.

Alur penggunaan di aplikasi

  1. Pendaftaran route — "Spinner" (judul: "Spinner").
  2. Navigasi — navigation.navigate("Spinner"). MenuComponents.
  3. Render — SafeAreaView + ScrollView; tiap section punya state boolean sendiri dan tombol Buttons untuk toggle tampilan spinner.

Cuplikan cepat

import { useState, View, Spinner, Buttons } from "NexaJS"; export default function Screen() { const [busy, setBusy] = useState(false); return ( <View style={{ flex: 1, padding: 16 }}> <Spinner visible={busy} overlay={true} text="Memuat..." textColor="#FFFFFF" overlayColor="rgba(0,0,0,0.5)" /> <Buttons label=Tampilkan onPress={() => setBusy(!busy)} background="#007AFF" txColor="#FFF" border={8} vertical={6} /> </View> ); }

Properti pada demo

  • visible — tampil atau tidak.
  • text, textColor — keterangan di bawah / pada overlay.
  • overlay — menutupi layar penuh.
  • size — mis. "small".
  • color — warna indikator.
  • overlayColor — latar overlay (RGBA).

Praktik yang disarankan

  • Set visible={false} setelah data/API selesai di finally.
  • Hindari beberapa overlay sekaligus menumpuk; satu spinner global sering cukup.