From 7439f1f510b3ce584c6157145a706b1fcd5fa023 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 12 Jul 2026 23:21:23 +0100
Subject: [PATCH] fix(dashboard): keep enroll join button visible with loading
 state (#744)

Logged-in users no longer lose the Join Course button while session
checks, app init, or auto-enrollment run. The button stays visible and
shows a loading spinner instead of being hidden during those flows.
---
 .../course/[slug]/enroll/+page.svelte         | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
index 7fe6eeee..1c68f931 100644
--- a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
@@ -64,6 +64,14 @@
           data.course?.status === 'ACTIVE' &&
           Boolean(data.course?.isPublished)
   );
+  const isPreparingEnrollment = $derived(
+    isLoggedIn &&
+      canJoinCourse &&
+      !enrollmentSucceeded &&
+      !enrolledPendingVerification &&
+      !appInitApi.isInitializedAndReady
+  );
+  const joinButtonLoading = $derived(!sessionReady || loading || enrollmentInFlight || isPreparingEnrollment);
 
   function getBlockedMessage(): string {
     if (blocksNewSignup) {
@@ -211,13 +219,7 @@
   <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<AuthUI
-  isLogin={false}
-  {handleSubmit}
-  isLoading={loading || !sessionReady || (isLoggedIn && canJoinCourse && enrollmentInFlight)}
-  showOnlyContent={true}
-  showLogo={true}
->
+<AuthUI isLogin={false} {handleSubmit} isLoading={joinButtonLoading} showOnlyContent={true} showLogo={true}>
   <div class="mt-0 w-full">
     <h3 class="mt-0 mb-4 text-center text-lg font-medium dark:text-white">{data.course?.title}</h3>
     <p class="text-center text-sm font-light dark:text-white">{data.course?.description}</p>
@@ -248,9 +250,9 @@
     {/if}
   </div>
 
-  {#if !enrolledPendingVerification && (!isLoggedIn || (isLoggedIn && canJoinCourse && !enrollmentInFlight))}
+  {#if !enrolledPendingVerification}
     <div class="my-4 flex w-full items-center justify-center">
-      <Button type="submit" disabled={!canJoinCourse || loading || !sessionReady || enrollmentInFlight} {loading}>
+      <Button type="submit" disabled={!canJoinCourse || joinButtonLoading} loading={joinButtonLoading}>
         {$t('course.navItem.landing_page.enroll_page.join_course')}
       </Button>
     </div>