Web uygulamalar\u0131n\u0131n modern d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimi (UX) bir uygulaman\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik bir fakt\u00f6rd\u00fcr. Kullan\u0131c\u0131lar, h\u0131zl\u0131 yan\u0131t veren, ak\u0131c\u0131 ve bilgilendirici aray\u00fczler beklerler. Ancak, veri \u00e7ekme i\u015flemleri, API \u00e7a\u011fr\u0131lar\u0131, yava\u015f a\u011f ba\u011flant\u0131lar\u0131 veya karma\u015f\u0131k hesaplamalar gibi nedenlerle uygulamalar\u0131n i\u00e7eri\u011fi y\u00fcklemesi zaman alabilir. Bu bekleme s\u00fcreleri, kullan\u0131c\u0131lar i\u00e7in hayal k\u0131r\u0131kl\u0131\u011f\u0131 yaratabilir ve uygulaman\u0131n “donmu\u015f” veya “\u00e7al\u0131\u015fm\u0131yor” gibi alg\u0131lanmas\u0131na neden olabilir. \u0130\u015fte bu noktada i\u00e7erik yer tutucular\u0131 devreye girer. \u0130\u00e7erik yer tutucular\u0131, ger\u00e7ek i\u00e7erik y\u00fcklenene kadar kullan\u0131c\u0131ya anlaml\u0131 bir geri bildirim sunarak, alg\u0131lanan performans\u0131 art\u0131r\u0131r ve daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n
Vue.js, reaktif do\u011fas\u0131 ve komponent tabanl\u0131 mimarisi sayesinde, bu t\u00fcr yer tutucu stratejilerini uygulamak i\u00e7in son derece uygun bir \u00e7er\u00e7evedir. Bu makalede, Vue.js ba\u011flam\u0131nda farkl\u0131 i\u00e7erik yer tutucu t\u00fcrlerini, bunlar\u0131n neden \u00f6nemli oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, geli\u015ftiricilere Vue.js uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirecek etkili yer tutucu \u00e7\u00f6z\u00fcmleri olu\u015fturmalar\u0131 i\u00e7in kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n
\u0130\u00e7erik yer tutucular\u0131, sadece bir estetik eklenti olman\u0131n \u00f6tesinde, kullan\u0131c\u0131 deneyiminin temel bir bile\u015fenidir. \u0130\u015fte neden bu kadar \u00f6nemli olduklar\u0131na dair ba\u015fl\u0131ca nedenler:<\/p>\n
Uygulaman\u0131n ger\u00e7ek y\u00fckleme s\u00fcresi de\u011fi\u015fmese bile, yer tutucular sayesinde kullan\u0131c\u0131lar uygulaman\u0131n daha h\u0131zl\u0131 y\u00fcklendi\u011fini alg\u0131lar. Bo\u015f bir ekran veya anlams\u0131z bir d\u00f6nen simge yerine, i\u00e7eri\u011fin gelecekteki yap\u0131s\u0131n\u0131 yans\u0131tan bir iskelet ekran\u0131, kullan\u0131c\u0131n\u0131n bekleme s\u00fcresini daha verimli ve az s\u0131k\u0131c\u0131 bulmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131n\u0131n sabr\u0131n\u0131 art\u0131r\u0131r ve uygulamadan ayr\u0131lma oran\u0131n\u0131 d\u00fc\u015f\u00fcrebilir.<\/p>\n
Yer tutucular, kullan\u0131c\u0131ya “bir \u015feyler oluyor, i\u00e7erik y\u00fckleniyor” mesaj\u0131n\u0131 a\u00e7\u0131k\u00e7a iletir. Bu, kullan\u0131c\u0131n\u0131n belirsizlik ya\u015famas\u0131n\u0131 engeller ve uygulaman\u0131n kontrol alt\u0131nda oldu\u011fu hissini verir. Hata durumlar\u0131nda veya bo\u015f veri setlerinde g\u00f6sterilen anlaml\u0131 mesajlar, kullan\u0131c\u0131ya ne oldu\u011funu a\u00e7\u0131klayarak ve bazen bir sonraki ad\u0131m\u0131 \u00f6nererek g\u00fcven olu\u015fturur.<\/p>\n
\u00d6zellikle iskelet ekranlar\u0131, i\u00e7eri\u011fin nihai d\u00fczenini \u00f6nceden taklit etti\u011fi i\u00e7in, ger\u00e7ek i\u00e7erik y\u00fcklendi\u011finde meydana gelebilecek ani d\u00fczen kaymalar\u0131n\u0131 (Cumulative Layout Shift – CLS) en aza indirir. Bu, Core Web Vitals metrikleri a\u00e7\u0131s\u0131ndan da \u00f6nemlidir ve daha ak\u0131c\u0131 bir g\u00f6rsel deneyim sa\u011flar.<\/p>\n
\u0130yi tasarlanm\u0131\u015f yer tutucular, uygulaman\u0131n genel esteti\u011fini ve profesyonelli\u011fini art\u0131r\u0131r. Detaylara verilen bu \u00f6zen, markan\u0131n kalitesini yans\u0131t\u0131r ve kullan\u0131c\u0131n\u0131n uygulamaya olan ba\u011fl\u0131l\u0131\u011f\u0131n\u0131 g\u00fc\u00e7lendirir.<\/p>\n
Do\u011fru uyguland\u0131\u011f\u0131nda, yer tutucular eri\u015filebilirlik a\u00e7\u0131s\u0131ndan da faydal\u0131d\u0131r. Ekran okuyucular i\u00e7in y\u00fckleme durumunu belirten ARIA nitelikleri, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n da uygulaman\u0131n mevcut durumu hakk\u0131nda bilgi sahibi olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Farkl\u0131 senaryolar i\u00e7in farkl\u0131 yer tutucu stratejileri mevcuttur. Her bir t\u00fcr, belirli bir amaca hizmet eder ve farkl\u0131 avantajlar sunar.<\/p>\n
\u0130skelet ekranlar\u0131, i\u00e7eri\u011fin ger\u00e7ek verilerle doldurulmadan \u00f6nceki temel yap\u0131s\u0131n\u0131 ve d\u00fczenini g\u00f6steren bo\u015f, genellikle gri renkli kutucuklar veya \u015fekillerdir. Bu ekranlar, i\u00e7eri\u011fin nihai g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc taklit ederek, kullan\u0131c\u0131n\u0131n ne bekledi\u011fini anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n
* Avantajlar\u0131:<\/strong> Y\u00fckleme g\u00f6stergeleri, genellikle d\u00f6nen ikonlar, ilerleme \u00e7ubuklar\u0131 veya basit metin mesajlar\u0131 \u015feklinde olan geleneksel y\u00fckleme animasyonlar\u0131d\u0131r.<\/p>\n * Avantajlar\u0131:<\/strong> Bo\u015f durumlar, bir listede hi\u00e7 veri olmad\u0131\u011f\u0131nda, arama sonucu bulunamad\u0131\u011f\u0131nda veya yeni bir kullan\u0131c\u0131n\u0131n panosu gibi durumlarda g\u00f6sterilen \u00f6zel ekranlard\u0131r.<\/p>\n * Avantajlar\u0131:<\/strong> Hata mesajlar\u0131, bir i\u015flemin ba\u015far\u0131s\u0131z olmas\u0131, a\u011f ba\u011flant\u0131s\u0131n\u0131n kopmas\u0131 veya sunucu hatas\u0131 gibi durumlarda kullan\u0131c\u0131ya bilgi veren ekranlard\u0131r.<\/p>\n * Avantajlar\u0131:<\/strong> Vue.js’in reaktif veri sistemi ve komponent tabanl\u0131 yap\u0131s\u0131, yer tutucular\u0131 uygulamay\u0131 olduk\u00e7a kolayla\u015ft\u0131r\u0131r. \u0130\u015fte temel yakla\u015f\u0131mlar:<\/p>\n En temel ve yayg\u0131n y\u00f6ntem, Vue’nun
\n * Y\u00fcklenen i\u00e7eri\u011fin yap\u0131s\u0131n\u0131 \u00f6nceden bildirir.
\n * Ani d\u00fczen kaymalar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.
\n * Alg\u0131lanan y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.
\n * G\u00f6rsel olarak daha estetiktir ve kullan\u0131c\u0131y\u0131 daha az rahats\u0131z eder.
\n* Kullan\u0131m Senaryolar\u0131:<\/strong>
\n * Liste g\u00f6r\u00fcn\u00fcmleri (\u00fcr\u00fcn listeleri, haber ak\u0131\u015flar\u0131).
\n * Kart tabanl\u0131 aray\u00fczler (kullan\u0131c\u0131 profilleri, i\u00e7erik kartlar\u0131).
\n * Metin bloklar\u0131 i\u00e7eren detay sayfalar\u0131.
\n * Karma\u015f\u0131k veri tablolar\u0131.<\/p>\nY\u00fckleme G\u00f6stergeleri (Loading Spinners\/Indicators)<\/h4>\n
\n * Uygulamas\u0131 basittir ve h\u0131zl\u0131 geri bildirim sa\u011flar.
\n * K\u0131sa s\u00fcreli y\u00fcklemeler i\u00e7in etkilidir.
\n * K\u00fc\u00e7\u00fck alanlarda kullan\u0131labilir (\u00f6rn. butonlar \u00fczerinde).
\n* Kullan\u0131m Senaryolar\u0131:<\/strong>
\n * K\u0131sa API \u00e7a\u011fr\u0131lar\u0131 veya veri g\u00f6nderme i\u015flemleri.
\n * Buton t\u0131klamalar\u0131 sonras\u0131 i\u015flem devam ederken.
\n * Form g\u00f6nderimleri.
\n * \u00c7ok k\u00fc\u00e7\u00fck, tekil bir verinin y\u00fcklendi\u011fi durumlar.
\n* S\u0131n\u0131rlamalar\u0131:<\/strong> Uzun y\u00fckleme s\u00fcrelerinde kullan\u0131c\u0131y\u0131 s\u0131kabilir ve ne y\u00fcklendi\u011fi hakk\u0131nda bilgi vermedi\u011fi i\u00e7in belirsizlik yaratabilir.<\/p>\nBo\u015f Durumlar (Empty States)<\/h4>\n
\n * Kullan\u0131c\u0131ya durum hakk\u0131nda net bilgi verir.
\n * Genellikle bir “eylem \u00e7a\u011fr\u0131s\u0131” (call to action) i\u00e7erir (\u00f6rn. “\u0130lk \u00fcr\u00fcn\u00fcn\u00fcz\u00fc ekleyin”, “Yeni bir arama yap\u0131n”).
\n * Uygulaman\u0131n nas\u0131l kullan\u0131laca\u011f\u0131na dair ipu\u00e7lar\u0131 sunabilir.
\n* Kullan\u0131m Senaryolar\u0131:<\/strong>
\n * Yeni kullan\u0131c\u0131lar\u0131n bo\u015f profilleri veya panolar\u0131.
\n * Arama sonu\u00e7lar\u0131n\u0131n bulunamad\u0131\u011f\u0131 durumlar.
\n * Bo\u015f al\u0131\u015fveri\u015f sepetleri.
\n * Filtreleme veya s\u0131ralama sonucu veri kalmamas\u0131.<\/p>\nHata Mesajlar\u0131 (Error Messages)<\/h4>\n
\n * Sorunu a\u00e7\u0131klar ve kullan\u0131c\u0131n\u0131n ne yapmas\u0131 gerekti\u011fini (yeniden deneme, destekle ileti\u015fime ge\u00e7me) y\u00f6nlendirir.
\n * Kullan\u0131c\u0131n\u0131n hayal k\u0131r\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r ve kontrol hissini korumas\u0131na yard\u0131mc\u0131 olur.
\n* Kullan\u0131m Senaryolar\u0131:<\/strong>
\n * API \u00e7a\u011fr\u0131lar\u0131nda ya\u015fanan hatalar.
\n * A\u011f ba\u011flant\u0131s\u0131 sorunlar\u0131.
\n * Ge\u00e7ersiz kullan\u0131c\u0131 giri\u015fi veya yetkilendirme hatalar\u0131.
\n * Sunucu taraf\u0131 hatalar\u0131.<\/p>\nVue.js’te Temel Yer Tutucu Uygulamalar\u0131<\/h3>\n
v-if \/ v-else ile Ko\u015fullu Renderlama<\/h4>\n
v-if<\/code>, v-else-if<\/code> ve v-else<\/code> direktiflerini kullanarak farkl\u0131 durumlar i\u00e7in farkl\u0131 i\u00e7erikleri ko\u015fullu olarak renderlamakt\u0131r. Bu genellikle isLoading<\/code>, hasError<\/code> veya isEmpty<\/code> gibi reaktif veri \u00f6zellikleriyle y\u00f6netilir.<\/p>\n\n