fix(loyalty-storefront): initial loading=true so 401 redirect doesn't flash wrong UI
Some checks failed
CI / ruff (push) Successful in 18s
CI / validate (push) Has been cancelled
CI / dependency-scanning (push) Has been cancelled
CI / docs (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / pytest (push) Has been cancelled

Loyalty dashboard's "Rejoignez notre programme" CTA flashed for one
render tick on a 401-triggered redirect: Alpine initialised the
component with loading=false + card=null, the template rendered
`x-show="!loading && !card"`, then the async API call completed with
401, apiClient.redirectIfCustomerAreaUnauthorized fired, and the
browser navigated away.

Flip the initial state to loading=true so both the card view
(x-show="!loading && card") and the join CTA (x-show="!loading &&
!card") stay hidden until the API call resolves. The template's
existing `x-show="loading"` spinner branch covers the in-flight
window.

Same fix in loyalty-history.js (same x-show pattern). Customer
profile + addresses already initialise loading=true, so no flicker
there.

User repro'd by deleting localStorage.customer_token + F5 on
/account/loyalty: pre-fix flashed the CTA for ~half a second before
redirect; post-fix should jump straight to the spinner, then to
/account/login.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-29 22:27:17 +02:00
parent 856db328b5
commit b04b36a232
2 changed files with 13 additions and 4 deletions

View File

@@ -16,8 +16,14 @@ function customerLoyaltyDashboard() {
// Wallet // Wallet
walletUrls: { google_wallet_url: null, apple_wallet_url: null }, walletUrls: { google_wallet_url: null, apple_wallet_url: null },
// UI state // UI state.
loading: false, // `loading` starts true so the "join the program" CTA
// (x-show="!loading && !card") doesn't flash for one render tick
// before init() / loadData() fires. With loading=true initially,
// both the card view and the join CTA stay hidden until the API
// call resolves — and if a 401 triggers a redirect, the user
// never sees the wrong UI.
loading: true,
showBarcode: false, showBarcode: false,
async init() { async init() {

View File

@@ -18,8 +18,11 @@ function customerLoyaltyHistory() {
pages: 0 pages: 0
}, },
// State // State.
loading: false, // Starts true so empty / no-data branches don't flash for one
// tick before the API call resolves (and if a 401 triggers the
// login redirect, the user never sees the wrong UI).
loading: true,
async init() { async init() {
loyaltyHistoryLog.info('Customer loyalty history initializing...'); loyaltyHistoryLog.info('Customer loyalty history initializing...');