Membuat loading content seperti di tokopedia

Pada era digital saat ini, pengalaman pengguna (user experience) menjadi salah satu faktor kunci dalam menentukan kesuksesan sebuah situs web atau aplikasi mobile. Pengguna tidak hanya memperhatikan konten yang ditampilkan, tetapi juga menilai seberapa cepat dan mulusnya proses pemuatan konten. Waktu pemuatan yang lama dapat menyebabkan pengguna kehilangan minat dan meninggalkan situs web atau aplikasi sebelum mereka melihat kontennya. Oleh karena itu, penting bagi frontend untuk memperhatikan aspek loading content agar dapat meningkatkan pengalaman pengguna.

Mengapa Loading Content Penting?

Loading content merupakan proses di mana situs web atau aplikasi mengambil dan menampilkan konten kepada pengguna. Proses ini dapat meliputi pengambilan gambar, teks, video, atau elemen-elemen lain yang dibutuhkan untuk menampilkan halaman atau layar aplikasi. Ketika loading content berlangsung, pengguna biasanya melihat indikator seperti loading spinner atau tanda bahwa konten sedang dimuat.

Loading content yang lambat dapat menjadi tantangan besar bagi frontend developer dan pengguna. Bagi pengguna, loading content yang lambat dapat menyebabkan frustrasi, kehilangan minat, dan bahkan meninggalkan situs web atau aplikasi yang sedang mereka akses. Namun Bagi frontend developer, tantangan utamanya adalah mengoptimalkan performa situs web atau aplikasi agar dapat memuat konten dengan cepat, terutama di bawah kondisi jaringan yang buruk atau menggunakan perangkat dengan spesifikasi rendah. Untuk mengatasi masalah loading content yang lambat, banyak frontend developer mulai menggunakan teknik skeleton loading.

Apa itu skeleton loading?

Skeleton loading, atau sering disebut juga “shimmering”, adalah teknik yang digunakan untuk memberikan umpan balik visual kepada pengguna saat konten sedang dimuat. Daripada menampilkan halaman kosong atau loading spinner yang membosankan, skeleton loading menampilkan kerangka atau “rangkaian” (skeleton) dari elemen-elemen yang akan muncul. Ini menciptakan ilusi bahwa konten segera akan tersedia, yang secara signifikan meningkatkan persepsi kecepatan pemuatan dan mengurangi frustrasi pengguna. Website besar seperti Tokopedia, Facebook, dan LinkedIn telah menggunakan teknik ini dengan baik.

Bagaimana cara membuat skeleton loading?

Untuk mengimplementasikan skeleton loading, kita perlu menentukan elemen-elemen utama yang akan ditampilkan sebagai kerangka. Misalnya, pada halaman profil pengguna, elemen utama seperti foto profil, nama pengguna, dan biografi dapat ditampilkan sebagai kerangka. Setelah itu, kita dapat menggunakan HTML, CSS, dan JavaScript untuk membuat efek skeleton loading.

Membuat Struktur HTML Yang Sama

Pertama, kita terlebih dahulu menentukan struktur HTML dasar halaman dengan menambahkan elemen-elemen yang akan ditampilkan sebagai kerangka dan konten sebenarnya. Dalam contoh gambar di atas, struktur HTML mengandung elemen untuk avatar pengguna, nama pengguna, dan biografi. Setelah menentukan struktur dasar halamannya kita tinggal mengcopy paste struktur tersebut untuk dijadikan skeleton.

//Struktur Dasar Halaman
<div class="profile-content hidden">
    <img class="avatar" src="me.jpg" alt="User Avatar">
    <div class="user-info">
        <div class="username">Safar Septyadi</div>
        <div class="bio">Fullstack Developer</div>
    </div>
</div>

//Struktur Skeleton Loading
<div class="profile-skeleton">
    <div class="avatar"></div>
    <div class="user-info">
        <div class="username"></div>
        <div class="bio"></div>
    </div>
</div>

Memberi Efek Animasi Pada Skeleton Menggunakan CSS

Kedua, menentukan style untuk elemen-elemen tersebut, termasuk warna, bentuk, dan animasi. Dalam contoh tersebut, CSS yang digunakan untuk memberikan efek animasi pada elemen-elemen kerangka tersebut menggunakan teknik linear gradient dan keyframes. Yaitu kita cukup menambahkan properti CSS yaitu animation.

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.profile-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
}

.profile-skeleton .avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 50%;
    margin-bottom: 20px;
}

.profile-skeleton .username {
    margin:0 auto;
    height: 20px;
    width: 150px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0f0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    margin-bottom: 10px;
}

.profile-skeleton .bio {
    height: 15px;
    width: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0f0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.profile-content.hidden {
    display: none;
}

.profile-content{
    margin-top:20px;
}

.profile-content img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-bottom:20px;
}

.profile-content .user-info .username{
    margin-bottom:10px;
}

@keyframes loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

Menampilkan Dan Menyembunyikan Skeleton Menggunakan Javascript

Ketiga, bagaimana cara kita mengaplikasikan loading skeleton ke halaman tersebut? Saya akan menggunakan javascript untuk menampilkan dan menyembunyikan loading skeleton yang sudah kita buat. Sebelumnya div yang saya munculkan terlebih dahulu adalah div skeleton loading yaitu div profile-skeleton. Untuk div profile-content akan saya hidden terlebih dahulu dengan memberikan class hidden.

Ketika halaman pertama kali dimuat akan muncul loading skeleton dan saya akan menggunakan event DOMContentLoaded untuk mengetahui apakah content sudah dimuat dengan sempurna. Jika sudah kita bisa men-set display pada element skeleton menjadi none. Dan memunculkan profile-content yang sebenenarnya dengan menghapus class hidden.

document.addEventListener("DOMContentLoaded", function () {
    // Simulasi waktu pemuatan konten
    setTimeout(function () {
        // Sembunyikan skeleton loading
        document.querySelector(".profile-skeleton").style.display = "none";
        
        // Tampilkan konten sebenarnya
        document.querySelector(".profile-content").classList.remove("hidden");
    }, 3000); // Ubah nilai ini sesuai dengan waktu pemuatan konten yang sebenarnya
});

Dengan menggabungkan ketiga langkah ini, kamu dapat membuat efek skeleton loading yang menarik dan memperbaiki pengalaman pengguna secara signifikan.

Implementasi Lengkap HTML, CSS, Javascript

Berikut adalah implementasi lengkap untuk animasi loading skeleton menggunakan HTML, CSS, dan JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Content Skeleton</title>
</head>
<style>
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.profile-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
}

.profile-skeleton .avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 50%;
    margin-bottom: 20px;
}

.profile-skeleton .username {
    margin:0 auto;
    height: 20px;
    width: 150px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0f0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    margin-bottom: 10px;
}

.profile-skeleton .bio {
    height: 15px;
    width: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0f0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.profile-content.hidden {
    display: none;
}

.profile-content{
    margin-top:20px;
}

.profile-content img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-bottom:20px;
}

.profile-content .user-info .username{
    margin-bottom:10px;
}

@keyframes loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
</style>
<body>
  <div class="profile-skeleton">
      <div class="avatar"></div>
      <div class="user-info">
          <div class="username"></div>
          <div class="bio"></div>
      </div>
  </div>
  <div class="profile-content hidden">
      <img class="avatar" src="me.jpg" alt="User Avatar">
      <div class="user-info">
          <div class="username">Safar Septyadi</div>
          <div class="bio">Fullstack Developer</div>
      </div>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
        // Simulasi waktu pemuatan konten
        setTimeout(function () {
            // Sembunyikan skeleton loading
            document.querySelector(".profile-skeleton").style.display = "none";
            
            // Tampilkan konten sebenarnya
            document.querySelector(".profile-content").classList.remove("hidden");
        }, 3000); // Ubah nilai ini sesuai dengan waktu pemuatan konten yang sebenarnya
    });
  </script>
</body>
</html>

Jika kamu ingin mengerjakannya secara cepat saya menyarankan untuk menggunakan beberapa plugin yang sudah tersedia seperti di jquery menggunakan plugin jquery.skeleton.loader atau di reactjs kamu bisa menginstall react-loading-skeleton. Tapi disini saya membuatnya dari 0 menggunakan HTML, CSS dan Javascript agar flow dari content loading skeleton ini dapat dipahami.

Baca Juga: Submit button loading in Javascript and CSS

Dengan menggunakan teknik skeleton loading ini, kamu dapat meningkatkan user experience pada situs web atau aplikasi kamu, sehingga pengguna akan lebih betah dan puas dalam menggunakan produk yang kamu tawarkan. Selamat mencoba!