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:
@@ -64,6 +64,14 @@
|
|||||||
data.course?.status === 'ACTIVE' &&
|
data.course?.status === 'ACTIVE' &&
|
||||||
Boolean(data.course?.isPublished)
|
Boolean(data.course?.isPublished)
|
||||||
);
|
);
|
||||||
|
const isPreparingEnrollment = $derived(
|
||||||
|
isLoggedIn &&
|
||||||
|
canJoinCourse &&
|
||||||
|
!enrollmentSucceeded &&
|
||||||
|
!enrolledPendingVerification &&
|
||||||
|
!appInitApi.isInitializedAndReady
|
||||||
|
);
|
||||||
|
const joinButtonLoading = $derived(!sessionReady || loading || enrollmentInFlight || isPreparingEnrollment);
|
||||||
|
|
||||||
function getBlockedMessage(): string {
|
function getBlockedMessage(): string {
|
||||||
if (blocksNewSignup) {
|
if (blocksNewSignup) {
|
||||||
@@ -211,13 +219,7 @@
|
|||||||
<meta name="robots" content="noindex, nofollow" />
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<AuthUI
|
<AuthUI isLogin={false} {handleSubmit} isLoading={joinButtonLoading} showOnlyContent={true} showLogo={true}>
|
||||||
isLogin={false}
|
|
||||||
{handleSubmit}
|
|
||||||
isLoading={loading || !sessionReady || (isLoggedIn && canJoinCourse && enrollmentInFlight)}
|
|
||||||
showOnlyContent={true}
|
|
||||||
showLogo={true}
|
|
||||||
>
|
|
||||||
<div class="mt-0 w-full">
|
<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>
|
<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>
|
<p class="text-center text-sm font-light dark:text-white">{data.course?.description}</p>
|
||||||
@@ -248,9 +250,9 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if !enrolledPendingVerification && (!isLoggedIn || (isLoggedIn && canJoinCourse && !enrollmentInFlight))}
|
{#if !enrolledPendingVerification}
|
||||||
<div class="my-4 flex w-full items-center justify-center">
|
<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')}
|
{$t('course.navItem.landing_page.enroll_page.join_course')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user