Membuat Persistence Dark Mode dan Skeleton Effect dengan Mudah Menggunakan Library MudBlazor

Kenapa detail kecil seperti ini penting

Blazor sudah sangat menyenangkan untuk dipakai membangun UI interaktif, tetapi kenyamanan pengguna sering ditentukan oleh detail yang kelihatannya kecil. Dua contoh yang paling terasa adalah apakah preferensi tema tersimpan dengan baik, dan bagaimana tampilan halaman ketika data belum selesai dimuat.

Tanpa persistence, dark mode hanya terasa seperti dekorasi karena pengguna harus mengaktifkannya berulang kali. Tanpa skeleton, halaman terasa kosong lalu tiba-tiba meloncat ketika data datang. MudBlazor memberi kita pondasi yang rapi untuk menyelesaikan dua masalah tersebut tanpa menulis komponen dari nol.

Menyimpan preferensi dark mode

Pendekatan paling praktis adalah menyimpan pilihan tema ke browser storage setiap kali pengguna menekan tombol toggle. Saat aplikasi dibuka ulang, state tema cukup dibaca kembali lalu digunakan sebagai default.

Dengan begitu, dark mode benar-benar menjadi preferensi pribadi, bukan sekadar mode sesaat. Pengalaman ini terasa lebih dewasa karena aplikasi mengingat kebiasaan penggunanya.

@inject IJSRuntime JS

<MudSwitch @bind-Checked="_isDarkMode" Color="Color.Warning" />

@code {
    private bool _isDarkMode;

    protected override async Task OnInitializedAsync()
    {
        _isDarkMode = await JS.InvokeAsync<bool>("themeStore.get");
    }

    private async Task HandleThemeChanged(bool value)
    {
        _isDarkMode = value;
        await JS.InvokeVoidAsync("themeStore.set", value);
    }
}

Menghaluskan loading dengan skeleton state

Skeleton effect bekerja lebih baik daripada spinner untuk banyak kasus karena pengguna langsung melihat bentuk konten yang sedang dimuat. Mereka bisa menebak struktur halaman bahkan sebelum data asli datang.

MudBlazor menyediakan komponen skeleton yang mudah diposisikan mengikuti kartu, daftar, atau blok teks yang akan digantikan. Saat data selesai dimuat, kita tinggal menukar placeholder tersebut dengan konten sebenarnya.

{isLoading ? (
  <MudSkeleton Height="160px" Width="100%" Animation="Animation.Wave" />
) : (
  <MudCard>
    <MudCardContent>
      <MudText Typo="Typo.h6">{article.Title}</MudText>
      <MudText>{article.Description}</MudText>
    </MudCardContent>
  </MudCard>
)}

Pola implementasi yang aman dipakai

Cara paling rapi adalah memisahkan state tema, state loading, dan tampilan komponen. Dengan pemisahan itu, kita tidak kesulitan saat ingin memindahkan logika ke layout utama atau membagikannya ke halaman lain.

Jika aplikasimu memiliki banyak halaman, pertimbangkan membuat service kecil untuk tema dan helper untuk placeholder. Hasilnya lebih mudah diuji dan tidak membuat komponen presentasional menjadi terlalu ramai.

• Simpan preferensi tema di satu tempat yang konsisten.
• Buat skeleton mengikuti layout konten akhir, bukan sekadar kotak acak.
• Pastikan transisi loading ke konten final tidak menimbulkan layout shift besar.

Ringkasan

MudBlazor memudahkan kita memberikan pengalaman yang terasa lebih hidup tanpa menambah kompleksitas berlebihan. Persistence untuk dark mode membuat aplikasi terasa personal, sedangkan skeleton membuat proses menunggu terasa lebih tenang.

Kalau targetmu adalah aplikasi yang sederhana tapi tetap terasa dirawat, dua teknik ini layak jadi standar kecil di hampir setiap project Blazor.