Native Loader plugin Capacitor

Menggunakan @capgo/capacitor-native-loader

@capgo/capacitor-native-loader menampilkan status loading melalui view native iOS dan Android. Gunakan ini ketika loader perlu tetap mulus saat WebView sedang sibuk, ketika efek fullscreen transparan mahal di CSS, atau ketika plugin native lain perlu menampilkan UI loading sebelum JavaScript siap.

Instal

npm install @capgo/capacitor-native-loader
npx cap sync

Loader Native Layar Penuh

import { NativeLoader } from '@capgo/capacitor-native-loader';

const { id } = await NativeLoader.show({
  style: 'siri',
  placement: 'fullscreen',
  message: 'Preparing your session',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  scrimColor: 'rgba(3, 7, 18, 0.42)',
  interactionMode: 'block',
});

await initializeAppData();
await NativeLoader.hide({ id });

Loader Edge dengan Resize WebView

await NativeLoader.setWebViewLayout({
  mode: 'inset',
  insets: { top: 96 },
  animated: true,
});

await NativeLoader.show({
  style: 'wave',
  placement: 'top',
  message: 'Syncing changes',
  interactionMode: 'passThrough',
});

Saat loading selesai, pulihkan WebView:

await NativeLoader.hideAll({ restoreWebView: true });

Progress Atas Bergaya Chrome

Gunakan native top progress loader jika Anda ingin loading bar bergaya browser di atas WebView tanpa memaksa CSS beranimasi saat beban kerja berat.

const { id } = await NativeLoader.show({
  style: 'chrome',
  placement: 'top',
  colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
  thickness: 4,
  interactionMode: 'passThrough',
  webView: {
    mode: 'resize',
    insets: { top: 12 },
    restoreOnHide: true,
  },
});

await NativeLoader.hide({ id, restoreWebView: true });

Siri V2 Edge Loader

Gunakan siri-v2 untuk native full-screen loader yang memindahkan warna di tepi layar sementara WebView tetap terlihat.

const { id } = await NativeLoader.show({
  style: 'siri-v2',
  placement: 'fullscreen',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  thickness: 10,
  scrimColor: 'rgba(3, 7, 18, 0.10)',
  interactionMode: 'passThrough',
});

await NativeLoader.hide({ id });

Lottie Loader

await NativeLoader.show({
  style: 'lottie',
  placement: 'center',
  asset: {
    type: 'lottie',
    source: 'loader.json',
    loop: true,
  },
});

Aset yang dibundel paling cocok untuk startup loader karena tersedia sebelum permintaan jaringan dan inisialisasi JavaScript.

Panggilan Plugin Native

Plugin ini mengekspos API native publik sehingga plugin lain dapat menampilkan atau menyembunyikan loader secara langsung.

Swift:

import CapgoCapacitorNativeLoader

let id = NativeLoader.shared.show(options: [
  "style": "orbit",
  "placement": "fullscreen",
  "message": "Opening secure session"
])

NativeLoader.shared.hide(id: id)

Kotlin:

import app.capgo.nativeloader.NativeLoader

val id = NativeLoader.show(
  activity = activity,
  options = mapOf(
    "style" to "orbit",
    "placement" to "fullscreen",
    "message" to "Loading profile",
  ),
  webView = bridge.webView,
)

NativeLoader.hide(id)

Link Berguna

• GitHub: https://github.com/Cap-go/capacitor-native-loader/
• Dokumentasi: /docs/plugins/native-loader/

Lanjutkan dari Menggunakan @capgo/capacitor-native-loader

Jika Anda menggunakan Menggunakan @capgo/capacitor-native-loader untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan @capgo/capacitor-native-loader untuk detail implementasi, Panduan Memulai untuk setup, Menggunakan @capgo/capacitor-native-navigation untuk layout chrome native dan WebView, dan Menggunakan @capgo/capacitor-transitions untuk transisi rute WebView.