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...');