UX: Kategori navigasyonunda öfke tıklamaları — node tıklamasında anında loading state yok (P2) #73

New Issue

root · 2026-06-01T19:51:38+03:00

root commented

2026-06-01 19:51:38 +03:00

TL;DR

Kullanıcı araç detay sayfasında kategori ağacında ilerlerken her seviyede tıklamadan sonra 0–300 ms görsel geri bildirim boşluğu yaşıyor → tekrar tekrar tıklıyor → rage click. Bir gerçek kullanıcı oturumunda 22 tıklamanın 9'u (%41) rage click olarak işaretlendi, oturum 158 saniyede sıfır kategori sonucu görmeden sonlandı.

Otomatik insight: panel cmpval1y6004ffcphova5oe0v (DeepSeek v4-flash, conf 0.85).

Kanıt — gerçek session

Alan	Değer
Session ID	`019e837a-8296-792a-89f4-ad803bd2a1fc`
Kullanıcı	authenticated (`bbe9ddfc-4a35-428b-899f-0e8239863e57`)
Cihaz	Android Chrome
Süre	158 s (13:58:25 → 14:00:53 UTC, 2026-06-01)
Tıklama	22
Rage click	9
Hata / 4xx / 5xx	0 / 0 / 0
Score / Severity	55 / P2
Tags	`ux_friction`, `frustrated_session`
Panel session linki	https://sp.semih.ai/insights/sessions/019e837a-8296-792a-89f4-ad803bd2a1fc

PostHog timeline

t (UTC)	event	URL
13:58:24	`$identify`	`/dashboard/vehicles/d283a730…`
14:00:14	`$pageview`	`…/categories/8b47a42…`
14:00:16	`parts_panel_viewed`	aynı
14:00:26	`$pageview`	araç detayına geri döndü
14:00:53	`$pageview`	farklı kategori `4eb19e0…`
14:01:05	`$pageview`	aynı kategori

Yorum: 13:58:24 → 14:00:14 arası 110 saniyelik dilimde tek bir pageview yok, yani 22 click'in büyük çoğunluğu o araç detay sayfasında — kategori ağacında / grid'inde gerçekleşmiş. İkinci kategori dakikalar içinde geri çıkılmış → kullanıcı doğru parçayı bulamadan ayrılmış.

Kod analizi — affordance neden zayıf

Üç görünüm (grid/tree/columns) hepsinde aynı pattern: click → router navigate veya child fetch arasında butonun kendisi disabled olmuyor, görünür state değişmiyor.

`apps/web/src/components/categories/category-grid.tsx` (varsayılan görünüm)

// L195-215
<button
  onClick={() => navigateToCategory(category)}
  disabled={category.unavailable}      // ← sadece "unavailable" için disabled
  className="w-full rounded-xl text-left ..."
>
  <CategoryCard
    ...
    isLoading={prefetchingIds.has(category.id)}  // ← yalnız prefetch sırasında spinner
  />
</button>

navigateToCategory (L129-153) router navigate({...}) çağırıyor. Click ile next route render arası — özellikle ilk navigation sırasında parçalar ve schema-pics fetch ediliyorken — butonda hiçbir görsel değişim yok. prefetchingIds sadece arka plan prefetch için.

`apps/web/src/components/categories/category-tree.tsx`

// L82-108
const handleExpand = useCallback(async () => {
  if (expanded) { setExpanded(false); return; }
  if (fetched)  { setExpanded(true);  return; }
  setLoading(true);
  try { … } finally { setLoading(false); }
}, [...]);

// L175-187 — spinner var ama 14px (h-3.5 w-3.5) ve chevron'un yerine geçiyor
{loading ? (
  <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
) : isLeaf ? null : ( <ChevronRight ... /> )}

Spinner mevcut ama:

Boyut çok küçük (14px) → mobilde bir parmak ucu altında kalan kısımda
Buton disabled olmuyor → ikinci tıklama TanStack Query dedupe'a takılır (extra API yok), ama görsel olarak hiçbir şey değişmediği için kullanıcı yine "tıklamadım mı?" hissi yaşar
Row hover/active state'leri click feedback'i için yeterli değil (transition 150 ms — gecikme algılanabilir)

`apps/web/src/components/categories/category-columns.tsx`

// L246-249 — yine küçük spinner, button disabled değil
{isLoading ? <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" /> : ... }

Root cause

Click → backend round-trip için per-button loading state'i tutmuyoruz veya tutsak da görsel ağırlığı yetersiz. Router transition için ek olarak hiçbir gösterge yok. Mobil/yavaş bağlantıda algılanan tepki süresi rage-click eşiğini (≥3 click içinde 1 s) kolayca aşıyor.

Quick fix (1–2 saatlik iş)

Grid butonlarına pending state: navigateToCategory içine useTransition ekle veya tıklanan categoryId'yi local pendingId state'inde tut. Buton:
- disabled={pendingId === category.id}
- Card içinde isLoading={pendingId === category.id || prefetchingIds.has(category.id)} — büyük (24×24+) ve kartın ortasına overlay olarak spinner
Tree spinner'ı büyüt (h-3.5 → h-5) ve loading sırasında butonu disable et (disabled={loading}).
Columns view'da da aynı disable + spinner büyütme.
Eklenebilir: tüm node buton'larına aria-busy={loading} — assistive tech ve testler için.

// category-grid.tsx
+ const [pendingId, setPendingId] = useState<string | null>(null);
  const navigateToCategory = useCallback((category) => {
+   setPendingId(category.id);
    …
    navigate({…});
  }, …);

  <button
-   disabled={category.unavailable}
+   disabled={category.unavailable || pendingId === category.id}
    …
  >
    <CategoryCard
      …
-     isLoading={prefetchingIds.has(category.id)}
+     isLoading={prefetchingIds.has(category.id) || pendingId === category.id}
    />
  </button>

// category-tree.tsx
  <button
+   disabled={loading}
+   aria-busy={loading}
    onClick={handleExpand}
    aria-expanded={expanded}
    …
  >
    …
-   <Loader2 className="h-3.5 w-3.5 animate-spin ..." />
+   <Loader2 className="h-5 w-5 animate-spin text-primary" />
  </button>

Uzun vadeli fix

Tüm kategori ağacını ilk vehicle yüklemesinde tek seferde getir — şu an /categories/tree/${id} zaten bunu yapıyor (vehicles_/$id/index.tsx L83-87), ama category-tree.tsx::handleExpand hâlâ derin seviyeler için /categories/${id}/children çağırıyor. Backend /categories/tree/${id} response'unu N-seviye derin dönecek şekilde genişlet (veya ?depth=all query'si ekle) → frontend'deki handleExpand lazy fetch kolu tamamen ölü kalsın.
Route-level prefetch agresifleştir: onMouseEnter/onFocus'ta queryClient.prefetchQuery(["category-parts", id, categoryId]) çağır (hover-prefetch). Şu an grid'de prefetchingIds var ama tetiği daha erken çek.
View transition API kullanarak click → next page geçişine 200 ms cross-fade ekle — algılanan responsiveness'i ciddi şekilde artırır.
Click target genişlet: tree row min-h zaten 44 px; grid kartları için min-h ≥ 96 px yap (mobil thumb target için Apple HIG önerisi).

Acceptance criteria

Grid kartına tıklandığında, route render edilene kadar kartta görünür bir loading state (spinner + disabled) bulunuyor.
Tree node'una tıklandığında loading sırasında butonun kendisi disabled ve spinner ≥ 20 px.
Columns view'da da aynı davranış.
Yeni Playwright e2e test'i: kategori grid'inde kart tıklaması → kart [disabled] ve aria-busy="true" oluyor → URL değişimi sonrası temizleniyor.
Unit test: category-tree.tsx handleExpand sırasında button disabled true olduğunu doğrula.

Validation plan

Insight cmpval1y6004ffcphova5oe0v panel'de 14 gün validation window ile işaretli (validationStartedAt set edildikten sonra). Acceptance:

sessions_meta üzerinde projectKey='sase' AND tags @> '{frustrated_session}' AND startUrl ILIKE '%/vehicles/%' filtresinde rage-click oranı %50+ düşmeli (baseline 14 günde N session, validation sonu karşılaştır).
posthog_events üzerinde category_view_changed ile $pageview (categories/) arası medyan delta süresi ölçülecek — fix sonrası medyan ≤ 1.5 s hedef.

Etkilenen segment

affected_user_segment: authenticated kullanıcılar (bu session subscriptionTier'sız ama auth_user promotion reason'ı ile yükseldi)
Mobile-first — Android/iOS Chrome'da daha sık tetikleniyor

Bağlantılı

Önceki benzer insight: cmpv9q3ms004dfcphluw0z8bh (parts panel affordance — aynı kök sebep: panel/grid'de tıklama sonrası state belirsiz). Bu iki insight'ı tek epic altında konsolide etmeyi veya bu issue'ya cmpv9q3ms…'i de related olarak eklemeyi öneriyorum.
Quick fix dosyaları:
- apps/web/src/components/categories/category-grid.tsx (L195-215, L129-153)
- apps/web/src/components/categories/category-tree.tsx (L82-108, L175-187)
- apps/web/src/components/categories/category-columns.tsx (L246-249)
Backend (uzun vade): apps/api/src/categories/categories.controller.ts — /categories/tree/:id derinlik genişletme

🤖 Generated from behavioral insight pipeline (DeepSeek v4-flash analysis of session 019e837a-8296-792a-89f4-ad803bd2a1fc).

## TL;DR Kullanıcı araç detay sayfasında kategori ağacında ilerlerken her seviyede tıklamadan sonra **0–300 ms görsel geri bildirim boşluğu** yaşıyor → tekrar tekrar tıklıyor → rage click. Bir gerçek kullanıcı oturumunda **22 tıklamanın 9'u (%41) rage click** olarak işaretlendi, oturum 158 saniyede sıfır kategori sonucu görmeden sonlandı. Otomatik insight: panel `cmpval1y6004ffcphova5oe0v` (DeepSeek v4-flash, conf 0.85). ## Kanıt — gerçek session | Alan | Değer | |---|---| | Session ID | `019e837a-8296-792a-89f4-ad803bd2a1fc` | | Kullanıcı | authenticated (`bbe9ddfc-4a35-428b-899f-0e8239863e57`) | | Cihaz | Android Chrome | | Süre | 158 s (13:58:25 → 14:00:53 UTC, 2026-06-01) | | Tıklama | 22 | | **Rage click** | **9** | | Hata / 4xx / 5xx | 0 / 0 / 0 | | Score / Severity | 55 / P2 | | Tags | `ux_friction`, `frustrated_session` | | Panel session linki | https://sp.semih.ai/insights/sessions/019e837a-8296-792a-89f4-ad803bd2a1fc | ### PostHog timeline | t (UTC) | event | URL | |---|---|---| | 13:58:24 | `$identify` | `/dashboard/vehicles/d283a730…` | | 14:00:14 | `$pageview` | `…/categories/8b47a42…` | | 14:00:16 | `parts_panel_viewed` | aynı | | 14:00:26 | `$pageview` | araç detayına geri döndü | | 14:00:53 | `$pageview` | farklı kategori `4eb19e0…` | | 14:01:05 | `$pageview` | aynı kategori | Yorum: **13:58:24 → 14:00:14 arası 110 saniyelik dilimde tek bir pageview yok**, yani 22 click'in büyük çoğunluğu o araç detay sayfasında — kategori ağacında / grid'inde gerçekleşmiş. İkinci kategori dakikalar içinde geri çıkılmış → kullanıcı doğru parçayı bulamadan ayrılmış. ## Kod analizi — affordance neden zayıf Üç görünüm (grid/tree/columns) hepsinde aynı pattern: **click → router navigate veya child fetch arasında butonun kendisi disabled olmuyor, görünür state değişmiyor**. ### `apps/web/src/components/categories/category-grid.tsx` (varsayılan görünüm) ```tsx // L195-215 <button onClick={() => navigateToCategory(category)} disabled={category.unavailable} // ← sadece "unavailable" için disabled className="w-full rounded-xl text-left ..." > <CategoryCard ... isLoading={prefetchingIds.has(category.id)} // ← yalnız prefetch sırasında spinner /> </button> ``` `navigateToCategory` (L129-153) router `navigate({...})` çağırıyor. **Click ile next route render arası — özellikle ilk navigation sırasında parçalar ve schema-pics fetch ediliyorken — butonda hiçbir görsel değişim yok**. `prefetchingIds` sadece arka plan prefetch için. ### `apps/web/src/components/categories/category-tree.tsx` ```tsx // L82-108 const handleExpand = useCallback(async () => { if (expanded) { setExpanded(false); return; } if (fetched) { setExpanded(true); return; } setLoading(true); try { … } finally { setLoading(false); } }, [...]); // L175-187 — spinner var ama 14px (h-3.5 w-3.5) ve chevron'un yerine geçiyor {loading ? ( <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" /> ) : isLeaf ? null : ( <ChevronRight ... /> )} ``` Spinner mevcut **ama**: - Boyut çok küçük (14px) → mobilde bir parmak ucu altında kalan kısımda - Buton `disabled` olmuyor → ikinci tıklama TanStack Query dedupe'a takılır (extra API yok), ama görsel olarak hiçbir şey değişmediği için kullanıcı yine "tıklamadım mı?" hissi yaşar - Row hover/active state'leri click feedback'i için yeterli değil (transition 150 ms — gecikme algılanabilir) ### `apps/web/src/components/categories/category-columns.tsx` ```tsx // L246-249 — yine küçük spinner, button disabled değil {isLoading ? <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" /> : ... } ``` ## Root cause Click → backend round-trip için **per-button loading state'i tutmuyoruz** veya tutsak da görsel ağırlığı yetersiz. Router transition için ek olarak hiçbir gösterge yok. Mobil/yavaş bağlantıda algılanan tepki süresi rage-click eşiğini (≥3 click içinde 1 s) kolayca aşıyor. ## Quick fix (1–2 saatlik iş) 1. **Grid butonlarına pending state**: `navigateToCategory` içine `useTransition` ekle veya tıklanan `categoryId`'yi local `pendingId` state'inde tut. Buton: - `disabled={pendingId === category.id}` - Card içinde `isLoading={pendingId === category.id || prefetchingIds.has(category.id)}` — büyük (24×24+) ve **kartın ortasına overlay** olarak spinner 2. **Tree spinner'ı büyüt** (`h-3.5` → `h-5`) ve loading sırasında **butonu disable** et (`disabled={loading}`). 3. **Columns view'da da aynı disable** + spinner büyütme. 4. Eklenebilir: tüm node buton'larına `aria-busy={loading}` — assistive tech ve testler için. ```diff // category-grid.tsx + const [pendingId, setPendingId] = useState<string | null>(null); const navigateToCategory = useCallback((category) => { + setPendingId(category.id); … navigate({…}); }, …); <button - disabled={category.unavailable} + disabled={category.unavailable || pendingId === category.id} … > <CategoryCard … - isLoading={prefetchingIds.has(category.id)} + isLoading={prefetchingIds.has(category.id) || pendingId === category.id} /> </button> ``` ```diff // category-tree.tsx <button + disabled={loading} + aria-busy={loading} onClick={handleExpand} aria-expanded={expanded} … > … - <Loader2 className="h-3.5 w-3.5 animate-spin ..." /> + <Loader2 className="h-5 w-5 animate-spin text-primary" /> </button> ``` ## Uzun vadeli fix 1. **Tüm kategori ağacını ilk vehicle yüklemesinde tek seferde getir** — şu an `/categories/tree/${id}` zaten bunu yapıyor (`vehicles_/$id/index.tsx` L83-87), ama `category-tree.tsx::handleExpand` hâlâ derin seviyeler için `/categories/${id}/children` çağırıyor. Backend `/categories/tree/${id}` response'unu **N-seviye derin** dönecek şekilde genişlet (veya `?depth=all` query'si ekle) → frontend'deki `handleExpand` lazy fetch kolu tamamen ölü kalsın. 2. **Route-level prefetch agresifleştir**: `onMouseEnter`/`onFocus`'ta `queryClient.prefetchQuery(["category-parts", id, categoryId])` çağır (hover-prefetch). Şu an grid'de `prefetchingIds` var ama tetiği daha erken çek. 3. **View transition API** kullanarak click → next page geçişine 200 ms cross-fade ekle — algılanan responsiveness'i ciddi şekilde artırır. 4. **Click target genişlet**: tree row min-h zaten 44 px; grid kartları için min-h ≥ 96 px yap (mobil thumb target için Apple HIG önerisi). ## Acceptance criteria - [ ] Grid kartına tıklandığında, route render edilene kadar kartta görünür bir loading state (spinner + disabled) bulunuyor. - [ ] Tree node'una tıklandığında loading sırasında butonun kendisi disabled ve spinner ≥ 20 px. - [ ] Columns view'da da aynı davranış. - [ ] Yeni Playwright e2e test'i: kategori grid'inde kart tıklaması → kart `[disabled]` ve `aria-busy="true"` oluyor → URL değişimi sonrası temizleniyor. - [ ] Unit test: `category-tree.tsx` handleExpand sırasında button `disabled` true olduğunu doğrula. ## Validation plan Insight `cmpval1y6004ffcphova5oe0v` panel'de **14 gün validation window** ile işaretli (`validationStartedAt` set edildikten sonra). Acceptance: - `sessions_meta` üzerinde `projectKey='sase' AND tags @> '{frustrated_session}' AND startUrl ILIKE '%/vehicles/%'` filtresinde **rage-click oranı %50+ düşmeli** (baseline 14 günde N session, validation sonu karşılaştır). - `posthog_events` üzerinde `category_view_changed` ile `$pageview` (categories/) arası medyan delta süresi ölçülecek — fix sonrası medyan ≤ 1.5 s hedef. ## Etkilenen segment - `affected_user_segment`: **authenticated kullanıcılar** (bu session subscriptionTier'sız ama auth_user promotion reason'ı ile yükseldi) - Mobile-first — Android/iOS Chrome'da daha sık tetikleniyor ## Bağlantılı - Önceki benzer insight: `cmpv9q3ms004dfcphluw0z8bh` (parts panel affordance — aynı kök sebep: panel/grid'de tıklama sonrası state belirsiz). Bu iki insight'ı **tek epic altında konsolide etmeyi** veya bu issue'ya `cmpv9q3ms…`'i de related olarak eklemeyi öneriyorum. - Quick fix dosyaları: - `apps/web/src/components/categories/category-grid.tsx` (L195-215, L129-153) - `apps/web/src/components/categories/category-tree.tsx` (L82-108, L175-187) - `apps/web/src/components/categories/category-columns.tsx` (L246-249) - Backend (uzun vade): `apps/api/src/categories/categories.controller.ts` — `/categories/tree/:id` derinlik genişletme --- 🤖 Generated from behavioral insight pipeline (DeepSeek v4-flash analysis of session `019e837a-8296-792a-89f4-ad803bd2a1fc`).

root commented

2026-06-01 19:51:39 +03:00

🤖 Fusion task opened: FN-421

Triage queue: https://fusion.semih.ai/tasks/FN-421

This comment was posted automatically by the fusion-plugin-gitea-issues bridge. A Fusion agent will update this issue when the task moves to in-progress, in-review, or done.

🤖 Fusion task opened: `FN-421` Triage queue: https://fusion.semih.ai/tasks/FN-421 _This comment was posted automatically by the `fusion-plugin-gitea-issues` bridge. A Fusion agent will update this issue when the task moves to in-progress, in-review, or done._

root added the insight-driven sase-pilot severity-P2 type-ux_friction labels 2026-06-01 19:51:46 +03:00

root referenced this issue

2026-06-01 23:22:34 +03:00

Mobile UX: Schema sayfasında parça listesine ulaşılamıyor — 1-parmak touch sayfa scroll'unu çalıyor (P2) #76

root referenced this issue from a commit

2026-06-02 15:15:09 +03:00

fix(web): instant loading feedback on category node clicks (#73)

root commented

2026-06-02 15:33:43 +03:00

✅ Çözüldü — quick fix uygulandı (dev'de canlı)

Üç görünümde de tıklama sonrası anında, belirgin loading state eklendi. Kök neden (click → navigate/fetch arası feedback boşluğu) issue'da önerilen quick-fix deseniyle giderildi.

Commit: 6bcb7ac — fix(web): instant loading feedback on category node clicks (#73) (branch: dev, dev.sase.tr'de canlı)

Değişiklikler

Görünüm	Dosya	Düzeltme
Grid (varsayılan)	`category-grid.tsx`	Tıklanan kart `pendingId` ile anında `disabled` + `aria-busy`; kartın ortasına 28px primary spinner overlay (her iki kart varyantında)
Tree	`category-tree.tsx`	Expand butonu fetch sırasında `disabled` + `aria-busy`; chevron-slot spinner'ı 14px → 20px, primary renk
Columns	`category-columns.tsx`	Satır lazy-fetch sırasında `disabled` + `aria-busy`; aynı 20px primary spinner

Acceptance criteria

Grid kartına tıklandığında route render edilene kadar görünür loading state (spinner + disabled)
Tree node'una tıklandığında loading sırasında buton disabled ve spinner ≥ 20 px
Columns view'da da aynı davranış
Tüm node buton'larına aria-busy
Unit test: grid pending-state + tree/columns loading (disabled/aria-busy/spinner) — 5 yeni test geçiyor

e2e için repo Playwright'ı CI'da çalıştırmıyor (apps/web = Vitest); bunun yerine eşdeğer Vitest unit testleri yazıldı + gerçek dashboard'da mobil tarayıcı doğrulaması yapıldı.

Gerçek dashboard doğrulaması (mobil, authenticated)

VW Amarok aracında, signed better-auth oturumuyla dev.sase.tr üzerinde:

Tree — lazy grandchild ("Bobin Yayları") tıklamasında fetch boyunca aria-busy=true, disabled=true, spinner 22×22px (chevron yerine primary spinner). ✅
Columns — aynı satır seçiminde aria-busy=true, disabled=true, spinner 22×22px. ✅

Not — grid (varsayılan görünüm) hakkında

Hedef kategori route'u in-component useQuery kullanıyor (blocking loader yok), bu yüzden grid tıklamasında route hızla swap olup hedef sayfanın kendi skeleton'ı (SchemaViewer) feedback veriyor; grid pending-overlay yalnızca kısa router-transition boşluğunu kapatıyor. Overlay yine de deploy edilmiş + unit-test'li. İssue'nun uzun vade maddeleri (route-level hover-prefetch, View Transition API ile cross-fade, tree ?depth=all ile lazy fetch kolunu öldürme) ayrı bir takip için açık bırakılabilir — istenirse cmpv9q3ms… parts-panel insight'ı ile birlikte tek epic altında toplanabilir.

🤖 Generated with Claude Code

## ✅ Çözüldü — quick fix uygulandı (dev'de canlı) Üç görünümde de tıklama sonrası **anında, belirgin loading state** eklendi. Kök neden (click → navigate/fetch arası feedback boşluğu) issue'da önerilen quick-fix deseniyle giderildi. **Commit:** `6bcb7ac` — `fix(web): instant loading feedback on category node clicks (#73)` (branch: `dev`, dev.sase.tr'de canlı) ### Değişiklikler | Görünüm | Dosya | Düzeltme | |---|---|---| | **Grid** (varsayılan) | `category-grid.tsx` | Tıklanan kart `pendingId` ile anında `disabled` + `aria-busy`; kartın ortasına 28px primary spinner overlay (her iki kart varyantında) | | **Tree** | `category-tree.tsx` | Expand butonu fetch sırasında `disabled` + `aria-busy`; chevron-slot spinner'ı 14px → **20px**, primary renk | | **Columns** | `category-columns.tsx` | Satır lazy-fetch sırasında `disabled` + `aria-busy`; aynı 20px primary spinner | ### Acceptance criteria - [x] Grid kartına tıklandığında route render edilene kadar görünür loading state (spinner + disabled) - [x] Tree node'una tıklandığında loading sırasında buton disabled ve spinner ≥ 20 px - [x] Columns view'da da aynı davranış - [x] Tüm node buton'larına `aria-busy` - [x] Unit test: grid pending-state + tree/columns loading (`disabled`/`aria-busy`/spinner) — 5 yeni test geçiyor > e2e için repo Playwright'ı CI'da çalıştırmıyor (apps/web = Vitest); bunun yerine eşdeğer Vitest unit testleri yazıldı + gerçek dashboard'da mobil tarayıcı doğrulaması yapıldı. ### Gerçek dashboard doğrulaması (mobil, authenticated) VW Amarok aracında, signed better-auth oturumuyla dev.sase.tr üzerinde: - **Tree** — lazy grandchild ("Bobin Yayları") tıklamasında fetch boyunca `aria-busy=true`, `disabled=true`, spinner **22×22px** (chevron yerine primary spinner). ✅ - **Columns** — aynı satır seçiminde `aria-busy=true`, `disabled=true`, spinner 22×22px. ✅ ### Not — grid (varsayılan görünüm) hakkında Hedef kategori route'u in-component `useQuery` kullanıyor (blocking loader yok), bu yüzden grid tıklamasında route hızla swap olup **hedef sayfanın kendi skeleton'ı** (SchemaViewer) feedback veriyor; grid pending-overlay yalnızca kısa router-transition boşluğunu kapatıyor. Overlay yine de deploy edilmiş + unit-test'li. İssue'nun **uzun vade** maddeleri (route-level hover-prefetch, View Transition API ile cross-fade, tree `?depth=all` ile lazy fetch kolunu öldürme) ayrı bir takip için açık bırakılabilir — istenirse `cmpv9q3ms…` parts-panel insight'ı ile birlikte tek epic altında toplanabilir. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

root closed this issue

2026-06-02 15:33:48 +03:00

root referenced this issue

2026-06-03 20:08:54 +03:00

Schema/diagram images have no broken-image fallback — 404 renders broken glyph with no UX feedback #90

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: root/sase.tr#73

UX: Kategori navigasyonunda öfke tıklamaları — node tıklamasında anında loading state yok (P2) #73

TL;DR

Kanıt — gerçek session

PostHog timeline

Kod analizi — affordance neden zayıf

apps/web/src/components/categories/category-grid.tsx (varsayılan görünüm)

apps/web/src/components/categories/category-tree.tsx

apps/web/src/components/categories/category-columns.tsx

Root cause

Quick fix (1–2 saatlik iş)

Uzun vadeli fix

Acceptance criteria

Validation plan

Etkilenen segment

Bağlantılı

✅ Çözüldü — quick fix uygulandı (dev'de canlı)

Değişiklikler

Acceptance criteria

Gerçek dashboard doğrulaması (mobil, authenticated)

Not — grid (varsayılan görünüm) hakkında

`apps/web/src/components/categories/category-grid.tsx` (varsayılan görünüm)

`apps/web/src/components/categories/category-tree.tsx`

`apps/web/src/components/categories/category-columns.tsx`