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.
This commit is contained in:
Rotimi Best
2026-07-12 23:21:23 +01:00
committed by GitHub
parent 8bd07a524c
commit 7439f1f510
@@ -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>