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
|
// 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() {
|
||||||
|
|||||||
@@ -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...');
|
||||||
|
|||||||
Reference in New Issue
Block a user