fix(loyalty-storefront): initial loading=true so 401 redirect doesn't flash wrong UI
Some checks failed
Some checks failed
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:
@@ -16,8 +16,14 @@ function customerLoyaltyDashboard() {
|
||||
// Wallet
|
||||
walletUrls: { google_wallet_url: null, apple_wallet_url: null },
|
||||
|
||||
// UI state
|
||||
loading: false,
|
||||
// UI state.
|
||||
// `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,
|
||||
|
||||
async init() {
|
||||
|
||||
@@ -18,8 +18,11 @@ function customerLoyaltyHistory() {
|
||||
pages: 0
|
||||
},
|
||||
|
||||
// State
|
||||
loading: false,
|
||||
// State.
|
||||
// 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() {
|
||||
loyaltyHistoryLog.info('Customer loyalty history initializing...');
|
||||
|
||||
Reference in New Issue
Block a user