From b04b36a23273a8fd60e41f4e42711e8e04d952e4 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Fri, 29 May 2026 22:27:17 +0200
Subject: [PATCH] fix(loyalty-storefront): initial loading=true so 401 redirect
 doesn't flash wrong UI

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>
---
 .../loyalty/static/storefront/js/loyalty-dashboard.js  | 10 ++++++++--
 .../loyalty/static/storefront/js/loyalty-history.js    |  7 +++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/modules/loyalty/static/storefront/js/loyalty-dashboard.js b/app/modules/loyalty/static/storefront/js/loyalty-dashboard.js
index 0f9240b3..05b7862b 100644
--- a/app/modules/loyalty/static/storefront/js/loyalty-dashboard.js
+++ b/app/modules/loyalty/static/storefront/js/loyalty-dashboard.js
@@ -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() {
diff --git a/app/modules/loyalty/static/storefront/js/loyalty-history.js b/app/modules/loyalty/static/storefront/js/loyalty-history.js
index 798f32ab..accb13ea 100644
--- a/app/modules/loyalty/static/storefront/js/loyalty-history.js
+++ b/app/modules/loyalty/static/storefront/js/loyalty-history.js
@@ -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...');