Modern web uygulamalarında kullanıcı deneyimini iyileştirmek için loading durumlarını yönetmek çok önemlidir. Bu makalede, Vue.js tabanlı bir projede CSS kullanarak nasıl etkili bir skeleton loading sistemi oluşturduğumuzu anlatacağım. Aslında Vue ile çok bir alaksı yok. Tüm önyüz projelerinizde sadece css kullanarak her komponent için ayrı ayrı skeleton yazma zahmetinden kurtulacaksınız.
Ayrıcana bu çalışma benim yıllardır uygulamaya çalıştığım ve adını kapsayıcı yaklaşım olarak tanımladığım yaklaşımın sizinle paylaştığım ilk örneği olacak.
Çok dilli bir web uygulamasında, dil değişikliği yapıldığında veya sayfa ilk yüklendiğinde çeviri verilerinin API'den gelmesini beklerken kullanıcıya boş bir ekran veya fmt keyler göstermek yerine, içeriğin yükleneceğini belirten bir gösterim yapmak istiyoruz.
Burada biz çok dilli sistem dedik ama herhangi bir veri tabanından içerik çekmeniz gerektiği yerde textleriniz ekrana tam olarak oturana kadar gösterilmemesi tercih edilmesi gereken bir durumdur.
Mantığı anladıktan sonra zaten sadece text değil diğer medya ve elementlere de uygulayabileceksiniz.
Geliştirdiğimiz çözüm, CSS'in cascading (basamaklama) özelliğini kullanarak tek bir noktadan tüm metin elementlerine skeleton efekti uygulayan bir yaklaşımdır.
Vue için örneklendirdim çünkü şuanda gezindiğiniz Metin Gülerce'nin kişisel web sitesi vue ile yazıldı. Kendi siteme uyguladığım kısmı size anlatacağım. Ancak mantık tüm dil ve freamworklerde uygulanabilir. Kodlardan sonra bundan tekrar bahs edicem.
<script setup>
const isLoading = ref(true)
// API çağrısı sırasında loading durumunu yönetme
const fetchData = async () => {
isLoading.value = true
try {
await getData()
} finally {
isLoading.value = false
}
}
</script>
@keyframes shine {
100% {
transform: translateX(100%);
}
}
/* Text elementleri için base stiller */
.skeleton-loading h1,
.skeleton-loading h2,
.skeleton-loading p,
.skeleton-loading span {
position: relative;
overflow: hidden;
color: transparent; /* Opsiyonel */
}
/* Shine efekti için pseudo-element */
.skeleton-loading h1::before,
.skeleton-loading h2::before,
.skeleton-loading p::before,
.skeleton-loading span::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.05),
transparent
);
transform: translateX(-100%);
animation: shine 1.5s infinite;
}
<template>
<div :class="{ 'skeleton-loading': isLoading }">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
Evet kodları okudğunuzda büyük oranda mantığı kurmuşsunuzdur ama yinede diğer diller ve freamworkler içinde özetleyeyim. Şayet react ile skeleton yazacaksanız veya php ile skeleton yazacaksanız mantık hep aynı.
Öncelikle içeriklerin ekrana gelişini takpi edebiliyor olmanız gerekemekte. Projenizde içerik yönetimi dağınık halde ise yine uygulayabliirsiniz ama merkezileştirmeniz avantaj sağlar. %100 Merkezileştiremezseniz de helper dosyalarından yararlanıp kod tekrarnını azaltın.
Devam ediyorum İçerikleri çektiğiniz yada çoklu dil desteği için işlediğiniz fonksiyonu try & catch bloguna alın. Fonksiyon başlarken ve finaly kısmında c lassı kontrol edeceğimiz değişkeni manipüle edeceğiz.
Class'ı tanımlarken sitenizde genel olarak kullandığınız ve ileride kullanabileceğiniz tüm html text taglarını düşünüp ekleyin. Sakın .loader > * {...} gibi bir tanım eklemeyin :) Sadece text taglarını ve classılarını kapsayın. Mantık bu kadar basit.
.skeleton-loading {
/* GPU hızlandırması için */
will-change: transform;
/* Gereksiz render'ları önlemek için */
backface-visibility: hidden;
}
@supports not (inset: 0) {
.skeleton-loading::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
<template>
<div
:class="{ 'skeleton-loading': isLoading }"
:aria-busy="isLoading"
role="alert"
aria-live="polite"
>
<!-- içerik -->
</div>
</template>
Bu yaklaşım, özellikle içerik ağırlıklı ve çok dilli uygulamalarda loading durumlarını yönetmek için etkili bir çözüm sunuyor. Minimum kod ile maksimum etki sağlayan bu pattern, modern web uygulamalarında kullanıcı deneyimini iyileştirmek için ideal bir seçenek.
CSS'in cascading özelliğini kullanarak geliştirdiğimiz bu çözüm, geleneksel yaklaşımlara göre daha az kod, daha kolay bakım ve daha iyi performans sunuyor. Özellikle büyük ölçekli uygulamalarda, loading durumlarının merkezi yönetimi için güçlü bir alternatif oluşturuyor.
Ayrıca şuanda ziyaret ettiğiniz MetinGülerce.com sistesinde de blog kısmı hariç bu bahs ettiğim yöntemler ile skeleton uygulanmaktadır. Blog kısmında olmama sebebi blog kısmını çok dilli yapmamış olmam ve içerikleri markdown olarak sunmamdır.