fix(dashboard): show course cards in landing page settings preview (#697)

* fix(dashboard): show course cards in landing page settings preview

Fetch public courses for the org and pass them to the theme preview
on the landing page settings screen, matching the editor preview.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* refactor(dashboard): skip redundant public course fetches

Add loadPublicCoursesIfNeeded so settings, editor, and live landing
page reuse cached courses for the same org site instead of clearing
and refetching on every mount.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): always refetch courses on live org landing page

Keep loadPublicCoursesIfNeeded for settings preview and editor only.
The public-facing landing page should fetch fresh on each visit.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* feat(ui): add shared empty state for org landing page catalogs

Introduce OrgLandingPageCoursesEmpty using the dashboard Empty pattern
with landing-theme colors. Show it across all ten org landing templates
when no courses are published, and wire translated labels through
buildOrgLandingPageProps.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): address Greptile review on public courses cache

- Add coursesLoaded prop so empty catalog state waits for fetch
- Deduplicate concurrent public course requests via in-flight promise
- Refresh courses on settings mount; reuse cache in editor only
- Expose invalidatePublicCourses for explicit cache clearing

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): load landing preview courses when org store hydrates

Replace onMount course fetch with a reactive effect keyed on the route
slug and currentOrg.siteName so public courses load after app init.
Mark the fetch as complete in finally so failed requests show the empty
state instead of a permanently blank catalog section.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

apps/dashboard/src/lib/features/org/api/org.svelte.ts

@@ -70,8 +70,11 @@ class OrgApi extends BaseApiWithErrors {
   audiencePagination = $state<OrganizationAudiencePagination | null>(null);
   publicCourses: OrgPublicCourses = $state([]);
   hasMorePublicCourses = $state(false);
+  publicCoursesLoadedSiteName: string | null = $state(null);
 
   isFetchingOrgPublicCourses = $state(false);
+  private activePublicCoursesFetch: Promise<void> | null = null;
+  private activePublicCoursesFetchSiteName: string | null = null;
   private activeAudienceRequestController: AbortController | null = null;
 
   cancelAudienceRequest() {
@@ -155,15 +158,52 @@ class OrgApi extends BaseApiWithErrors {
     return response;
   }
 
+  invalidatePublicCourses() {
+    this.publicCoursesLoadedSiteName = null;
+  }
+
+  /**
+   * Refetches public courses for a site, clearing any cached settings preview data.
+   */
+  async refreshPublicCourses(siteName: string) {
+    if (!siteName) {
+      return;
+    }
+
+    this.invalidatePublicCourses();
+    await this.fetchPublicCoursesBySiteName(siteName);
+  }
+
+  /**
+   * Loads public courses for a site when they have not been fetched yet.
+   * Skips the request when courses are already in memory for the same site.
+   */
+  async loadPublicCoursesIfNeeded(siteName: string) {
+    if (!siteName || this.publicCoursesLoadedSiteName === siteName) {
+      return;
+    }
+
+    await this.fetchPublicCoursesBySiteName(siteName);
+  }
+
   /**
    * Gets public courses by organization siteName (for landing pages)
    * @param siteName Organization site name
    * @returns Published courses array
    */
   async getPublicCoursesBySiteName(siteName: string) {
+    this.invalidatePublicCourses();
+    await this.fetchPublicCoursesBySiteName(siteName);
+  }
+
+  private fetchPublicCoursesBySiteName(siteName: string): Promise<void> {
+    if (this.activePublicCoursesFetch && this.activePublicCoursesFetchSiteName === siteName) {
+      return this.activePublicCoursesFetch;
+    }
+
     this.isFetchingOrgPublicCourses = true;
 
-    await this.execute<GetOrgPublicCoursesRequest>({
+    const fetchPromise = this.execute<GetOrgPublicCoursesRequest>({
       requestFn: () =>
         classroomio.organization.courses.public.$get({
           query: { siteName }
@@ -172,10 +212,29 @@ class OrgApi extends BaseApiWithErrors {
       onSuccess: (response) => {
         this.publicCourses = response.data.courses;
         this.hasMorePublicCourses = response.data.hasMoreCourses;
+        this.publicCoursesLoadedSiteName = siteName;
+      }
+    })
+      .then(() => undefined)
+      .finally(() => {
+        this.isFetchingOrgPublicCourses = false;
+
+        if (this.publicCoursesLoadedSiteName !== siteName) {
+          this.publicCourses = [];
+          this.hasMorePublicCourses = false;
+          this.publicCoursesLoadedSiteName = siteName;
+        }
+
+        if (this.activePublicCoursesFetchSiteName === siteName) {
+          this.activePublicCoursesFetch = null;
+          this.activePublicCoursesFetchSiteName = null;
         }
       });
 
-    this.isFetchingOrgPublicCourses = false;
+    this.activePublicCoursesFetch = fetchPromise;
+    this.activePublicCoursesFetchSiteName = siteName;
+
+    return fetchPromise;
   }
 
   /**

apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte

@@ -49,7 +49,8 @@
       normalizeLandingPageSettings(org.landingpage),
       orgApi.publicCourses,
       orgApi.hasMorePublicCourses,
-      authAction
+      authAction,
+      { coursesLoaded: hasLoadedCourses }
     )
   );
 

apps/dashboard/src/lib/features/org/utils/landing-page.ts

@@ -18,6 +18,7 @@ import {
   labelMatchesSocialPlatform,
   resolveFooterSocialPlatform
 } from '@cio/ui/custom/org-landing-page/footer-social-platform';
+import { t } from '$lib/utils/functions/translations';
 
 export const landingPageThemes = [
   'minimal',
@@ -689,12 +690,20 @@ export function mapPublicCoursesToLandingPageCourses(courses: OrgPublicCourses):
   });
 }
 
+export function buildOrgLandingPageLabels(): OrgLandingPageProps['labels'] {
+  return {
+    catalogEmptyTitle: t.get('public_courses.catalog_empty.title'),
+    catalogEmptyDescription: t.get('public_courses.catalog_empty.description')
+  };
+}
+
 export function buildOrgLandingPageProps(
   org: AccountOrg,
   landingpage: unknown,
   courses: OrgPublicCourses,
   hasMoreCourses = false,
-  authAction?: OrgLandingPageProps['authAction']
+  authAction?: OrgLandingPageProps['authAction'],
+  options?: { coursesLoaded?: boolean }
 ): OrgLandingPageProps {
   const normalizedLandingPage = normalizeLandingPageSettings(landingpage);
 
@@ -704,7 +713,9 @@ export function buildOrgLandingPageProps(
     authAction,
     ...normalizedLandingPage,
     courses: mapPublicCoursesToLandingPageCourses(courses),
-    hasMoreCourses
+    hasMoreCourses,
+    coursesLoaded: options?.coursesLoaded ?? true,
+    labels: buildOrgLandingPageLabels()
   };
 }
 

apps/dashboard/src/lib/features/settings/pages/landingpage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
+  import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
@@ -134,7 +135,21 @@
       : { label: t.get('navigation.login'), href: '/login' }
   );
 
-  const previewProps = $derived(buildOrgLandingPageProps($currentOrg, normalized, [], false, authAction));
+  const previewSiteName = $derived($currentOrg.siteName || page.params.slug || '');
+
+  const coursesLoaded = $derived(!previewSiteName || orgApi.publicCoursesLoadedSiteName === previewSiteName);
+
+  const previewProps = $derived.by(() =>
+    buildOrgLandingPageProps($currentOrg, normalized, orgApi.publicCourses, orgApi.hasMorePublicCourses, authAction, {
+      coursesLoaded
+    })
+  );
+
+  $effect(() => {
+    if (!previewSiteName) return;
+
+    void orgApi.refreshPublicCourses(previewSiteName);
+  });
 
   const ThemeComponent = $derived(landingPageThemeComponents[currentTheme] ?? landingPageThemeComponents.minimal);
 

apps/dashboard/src/lib/utils/translations/da.json

@@ -3739,6 +3739,10 @@
       "title": "Ingen kurser fundet",
       "description": "Prøv at rydde dine filtre, eller tjek igen senere."
     },
+    "catalog_empty": {
+      "title": "Ingen kurser udgivet endnu",
+      "description": "Kom snart tilbage for nye programmer."
+    },
     "filters": {
       "title": "Filtrer efter tags",
       "help": "Vælg et eller flere tags for at filtrere kurser",

apps/dashboard/src/lib/utils/translations/de.json

@@ -3739,6 +3739,10 @@
       "title": "Keine Kurse gefunden",
       "description": "Versuchen Sie, Ihre Filter zu löschen, oder schauen Sie später noch einmal vorbei."
     },
+    "catalog_empty": {
+      "title": "Noch keine Kurse veröffentlicht",
+      "description": "Schauen Sie bald wieder vorbei für neue Programme."
+    },
     "filters": {
       "title": "Nach Tags filtern",
       "help": "Wählen Sie einen oder mehrere Tags aus, um Kurse zu filtern",

apps/dashboard/src/lib/utils/translations/en.json

@@ -1231,6 +1231,10 @@
     "empty": {
       "title": "No courses found",
       "description": "Try clearing your filters or check back later."
+    },
+    "catalog_empty": {
+      "title": "No courses published yet",
+      "description": "Check back soon for new programs."
     }
   },
   "org_navigation": {

apps/dashboard/src/lib/utils/translations/es.json

@@ -3739,6 +3739,10 @@
       "title": "No se encontraron cursos",
       "description": "Intente borrar sus filtros o vuelva a consultar más tarde."
     },
+    "catalog_empty": {
+      "title": "Aún no hay cursos publicados",
+      "description": "Vuelva pronto para ver nuevos programas."
+    },
     "filters": {
       "title": "Filtrar por etiquetas",
       "help": "Seleccione una o más etiquetas para filtrar cursos",

apps/dashboard/src/lib/utils/translations/fr.json

@@ -3739,6 +3739,10 @@
       "title": "Aucun cours trouvé",
       "description": "Essayez de supprimer vos filtres ou revenez plus tard."
     },
+    "catalog_empty": {
+      "title": "Aucun cours publié pour le moment",
+      "description": "Revenez bientôt pour découvrir de nouveaux programmes."
+    },
     "filters": {
       "title": "Filtrer par balises",
       "help": "Sélectionnez une ou plusieurs balises pour filtrer les cours",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -3739,6 +3739,10 @@
       "title": "कोई पाठ्यक्रम नहीं मिला",
       "description": "अपने फ़िल्टर साफ़ करने का प्रयास करें या बाद में दोबारा जाँचें।"
     },
+    "catalog_empty": {
+      "title": "अभी तक कोई पाठ्यक्रम प्रकाशित नहीं हुआ",
+      "description": "नए कार्यक्रमों के लिए जल्द ही वापस आएँ।"
+    },
     "filters": {
       "title": "टैग द्वारा फ़िल्टर करें",
       "help": "पाठ्यक्रमों को फ़िल्टर करने के लिए एक या अधिक टैग चुनें",

apps/dashboard/src/lib/utils/translations/pl.json

@@ -3739,6 +3739,10 @@
       "title": "Nie znaleziono kursów",
       "description": "Spróbuj wyczyścić filtry lub sprawdź później."
     },
+    "catalog_empty": {
+      "title": "Brak opublikowanych kursów",
+      "description": "Wróć wkrótce po nowe programy."
+    },
     "filters": {
       "title": "Filtruj według tagów",
       "help": "Wybierz jeden lub więcej tagów, aby filtrować kursy",

apps/dashboard/src/lib/utils/translations/pt.json

@@ -3739,6 +3739,10 @@
       "title": "Nenhum curso encontrado",
       "description": "Tente limpar os filtros ou volte mais tarde."
     },
+    "catalog_empty": {
+      "title": "Nenhum curso publicado ainda",
+      "description": "Volte em breve para novos programas."
+    },
     "filters": {
       "title": "Filtrar por tags",
       "help": "Selecione uma ou mais tags para filtrar cursos",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -3739,6 +3739,10 @@
       "title": "Курсы не найдены",
       "description": "Попробуйте очистить фильтры или зайдите позже."
     },
+    "catalog_empty": {
+      "title": "Пока нет опубликованных курсов",
+      "description": "Загляните позже — скоро появятся новые программы."
+    },
     "filters": {
       "title": "Фильтровать по тегам",
       "help": "Выберите один или несколько тегов, чтобы отфильтровать курсы.",

apps/dashboard/src/lib/utils/translations/vi.json

@@ -3739,6 +3739,10 @@
       "title": "Không tìm thấy khóa học nào",
       "description": "Hãy thử xóa bộ lọc của bạn hoặc kiểm tra lại sau."
     },
+    "catalog_empty": {
+      "title": "Chưa có khóa học nào được xuất bản",
+      "description": "Hãy quay lại sớm để xem các chương trình mới."
+    },
     "filters": {
       "title": "Lọc theo thẻ",
       "help": "Chọn một hoặc nhiều thẻ để lọc các khóa học",

apps/dashboard/src/routes/(app)/org/[slug]/settings/landingpage/edit/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import { onMount, type Component } from 'svelte';
+  import type { Component } from 'svelte';
   import { resolve } from '$app/paths';
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
@@ -90,24 +90,27 @@
         }
   );
 
-  const previewProps = $derived(
+  const previewSiteName = $derived($currentOrg.siteName || page.params.slug || '');
+
+  const coursesLoaded = $derived(!previewSiteName || orgApi.publicCoursesLoadedSiteName === previewSiteName);
+
+  const previewProps = $derived.by(() =>
     buildOrgLandingPageProps(
       $currentOrg,
       previewLandingPageSettings,
       orgApi.publicCourses,
       orgApi.hasMorePublicCourses,
-      authAction
+      authAction,
+      { coursesLoaded }
     )
   );
 
   const ThemeComponent = $derived(landingPageThemeComponents[previewTheme] ?? landingPageThemeComponents.minimal);
 
-  onMount(() => {
-    if ($currentOrg.siteName) {
-      orgApi.publicCourses = [];
-      orgApi.hasMorePublicCourses = false;
-      void orgApi.getPublicCoursesBySiteName($currentOrg.siteName);
-    }
+  $effect(() => {
+    if (!previewSiteName) return;
+
+    void orgApi.loadPublicCoursesIfNeeded(previewSiteName);
   });
 
   $effect(() => {

packages/ui/src/custom/org-landing-page/bold/org.svelte

@@ -7,6 +7,7 @@
   import BoldNav from './nav.svelte';
   import BoldHero from './hero.svelte';
   import BoldCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { DotPattern } from '../../animation/dot-pattern';
   import { themeStyle } from '../theme-style';
@@ -19,6 +20,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -43,6 +45,9 @@
         <div class="ui:flex ui:items-end ui:justify-between ui:mb-12">
           <h2 class="ui:text-4xl ui:font-black ui:tracking-tight">{labels?.catalogHeading ?? 'Latest Courses'}</h2>
         </div>
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-8">
             {#each courses as course, index (course.id)}
               <BoldCourseCard {course} {disableCourseLinks} {labels} />
@@ -61,6 +66,7 @@
               </Button>
             </div>
           {/if}
+        {/if}
       </div>
     </section>
   </main>

packages/ui/src/custom/org-landing-page/classic/org.svelte

@@ -7,6 +7,7 @@
   import ClassicNav from './nav.svelte';
   import ClassicHero from './hero.svelte';
   import ClassicCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -44,6 +46,9 @@
         <div class="ui:mt-6 ui:h-px ui:w-24 ui:bg-[var(--landing-border)] ui:mx-auto"></div>
       </div>
 
+      {#if coursesLoaded && courses.length === 0}
+        <OrgLandingPageCoursesEmpty {labels} />
+      {:else}
         <div class="ui:grid ui:grid-cols-1 ui:sm:grid-cols-2 ui:lg:grid-cols-3 ui:gap-8 ui:justify-items-center">
           {#each courses as course, index (course.id)}
             <ClassicCourseCard {course} {disableCourseLinks} {labels} />
@@ -63,6 +68,7 @@
             </Button>
           </div>
         {/if}
+      {/if}
     </section>
   </main>
 

packages/ui/src/custom/org-landing-page/corporate/org.svelte

@@ -7,6 +7,7 @@
   import CorporateNav from './nav.svelte';
   import CorporateHero from './hero.svelte';
   import CorporateCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -38,21 +40,18 @@
       {/snippet}
     </CorporateHero>
 
-    {#if courses.length > 0}
     <section class="ui:py-24 ui:px-6 ui:border-t ui:border-[var(--landing-border)]">
       <div class="ui:max-w-[1120px] ui:mx-auto">
         <div class="ui:flex ui:items-end ui:justify-between ui:flex-wrap ui:gap-4 ui:mb-10">
           <div>
-              <p
-                class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg)] ui:mb-3"
-              >
+            <p class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-fg)] ui:mb-3">
               {labels?.catalogEyebrow ?? 'Catalog'}
             </p>
             <h2 class="ui:text-3xl ui:lg:text-4xl ui:font-semibold ui:tracking-tight ui:m-0 ui:max-w-xl">
               {labels?.catalogHeading ?? 'Courses your teams are taking'}
             </h2>
           </div>
-            {#if hasMoreCourses}
+          {#if hasMoreCourses && courses.length > 0}
             <Button
               href={disableCourseLinks ? undefined : '/courses'}
               variant="outline"
@@ -64,6 +63,9 @@
           {/if}
         </div>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div
             class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]"
           >
@@ -71,9 +73,9 @@
               <CorporateCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
+        {/if}
       </div>
     </section>
-    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="corporate" />

packages/ui/src/custom/org-landing-page/courses-empty.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import LibraryBigIcon from '@lucide/svelte/icons/library-big';
+  import { Empty } from '../empty';
+  import type { OrgLandingPageLabels } from './types';
+
+  interface Props {
+    labels?: OrgLandingPageLabels;
+    class?: string;
+  }
+
+  let { labels, class: className = '' }: Props = $props();
+
+  const title = $derived(labels?.catalogEmptyTitle ?? 'No courses published yet');
+  const description = $derived(labels?.catalogEmptyDescription ?? 'Check back soon for new programs.');
+</script>
+
+<div
+  class="ui:[&_[data-slot=empty-title]]:text-[var(--landing-fg)] ui:[&_[data-slot=empty-description]]:text-[var(--landing-fg-muted)] {className}"
+>
+  <Empty
+    icon={LibraryBigIcon}
+    {title}
+    {description}
+    variant="page"
+    class="ui:border-[var(--landing-border)] ui:bg-[var(--landing-card-soft)]/40"
+    iconClass="ui:text-[var(--landing-fg-muted)]"
+  />
+</div>

packages/ui/src/custom/org-landing-page/editorial/org.svelte

@@ -7,6 +7,7 @@
   import EditorialNav from './nav.svelte';
   import EditorialHero from './hero.svelte';
   import EditorialCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { themeStyle } from '../theme-style';
   import { Button } from '../../../base/button';
   import { getCourseTypeLandingMeta } from '../landing-page-utils';
@@ -19,6 +20,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -96,7 +98,6 @@
       {/snippet}
     </EditorialHero>
 
-    {#if courses.length > 0}
     <section id="courses" class="ui:py-10 ui:px-6 ui:md:px-8 ui:bg-[var(--landing-bg)]">
       <div class="ui:max-w-[1240px] ui:mx-auto">
         <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:justify-between ui:gap-6 ui:mb-8">
@@ -115,7 +116,7 @@
                 'Cohort-based and self-paced — every course ends with a reviewed project and a certificate of completion.'}
             </p>
           </div>
-            {#if hasMoreCourses}
+          {#if hasMoreCourses && courses.length > 0}
             <Button
               href={disableCourseLinks ? undefined : '/courses'}
               variant="outline"
@@ -127,6 +128,9 @@
           {/if}
         </div>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           {#if visibleFilterDefs.length > 1}
             <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-1.5 ui:mb-8">
               {#each visibleFilterDefs as def (def.key)}
@@ -169,9 +173,9 @@
               </Button>
             </div>
           {/if}
+        {/if}
       </div>
     </section>
-    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="editorial" />

packages/ui/src/custom/org-landing-page/index.ts

@@ -69,6 +69,7 @@ export {
   courseCard as VibrantLandingCourseCard
 } from './vibrant';
 
+export { default as OrgLandingPageCoursesEmpty } from './courses-empty.svelte';
 export { default as LandingButton } from './landing-button.svelte';
 export { default as OrgLandingPageEmbed } from './embed.svelte';
 export { default as OrgLandingPageCallout } from './callout.svelte';

packages/ui/src/custom/org-landing-page/minimal/org.svelte

@@ -7,6 +7,7 @@
   import MinimalNav from './nav.svelte';
   import MinimalHero from './hero.svelte';
   import MinimalCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -41,6 +43,9 @@
     <section class="ui:py-20 ui:px-4">
       <div class="ui:max-w-[1200px] ui:mx-auto">
         <h2 class="ui:text-2xl ui:font-semibold ui:mb-8">{labels?.catalogHeading ?? 'Our Courses'}</h2>
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6">
             {#each courses as course, index (course.id)}
               <MinimalCourseCard {course} {disableCourseLinks} {labels} />
@@ -59,6 +64,7 @@
               </Button>
             </div>
           {/if}
+        {/if}
       </div>
     </section>
   </main>

packages/ui/src/custom/org-landing-page/saas/org.svelte

@@ -7,6 +7,7 @@
   import SaasNav from './nav.svelte';
   import SaasHero from './hero.svelte';
   import SaasCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -38,7 +40,6 @@
       {/snippet}
     </SaasHero>
 
-    {#if courses.length > 0}
     <div class="plus-row"></div>
 
     <section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
@@ -56,7 +57,7 @@
               {labels?.catalogHeading ?? 'Featured courses.'}
             </h2>
           </div>
-            {#if hasMoreCourses}
+          {#if hasMoreCourses && courses.length > 0}
             <Button
               href={disableCourseLinks ? undefined : '/courses'}
               variant="outline"
@@ -68,14 +69,17 @@
           {/if}
         </div>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div class="course-grid ui:relative">
             {#each courses as course, index (course.id)}
               <SaasCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
+        {/if}
       </div>
     </section>
-    {/if}
 
     {#if links && links.cards.length > 0}
       <div class="plus-row"></div>

packages/ui/src/custom/org-landing-page/studio/org.svelte

@@ -7,6 +7,7 @@
   import StudioNav from './nav.svelte';
   import StudioHero from './hero.svelte';
   import StudioCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -38,7 +40,6 @@
       {/snippet}
     </StudioHero>
 
-    {#if courses.length > 0}
     <section class="ui:py-24 ui:px-6 ui:border-t ui:border-[var(--landing-border)]">
       <div class="ui:max-w-[1080px] ui:mx-auto">
         <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-12 ui:items-end ui:mb-12">
@@ -51,7 +52,7 @@
               {labels?.catalogHeading ?? 'Courses your team can actually finish.'}
             </h2>
           </div>
-            {#if hasMoreCourses}
+          {#if hasMoreCourses && courses.length > 0}
             <div class="ui:flex ui:justify-start ui:md:justify-end">
               <Button
                 href={disableCourseLinks ? undefined : '/courses'}
@@ -65,14 +66,17 @@
           {/if}
         </div>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-3">
             {#each courses as course, index (course.id)}
               <StudioCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
+        {/if}
       </div>
     </section>
-    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="studio" />

packages/ui/src/custom/org-landing-page/tech/org.svelte

@@ -7,6 +7,7 @@
   import TechNav from './nav.svelte';
   import TechHero from './hero.svelte';
   import TechCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
 
@@ -18,6 +19,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -38,21 +40,18 @@
       {/snippet}
     </TechHero>
 
-    {#if courses.length > 0}
     <section class="ui:py-24 ui:px-6">
       <div class="ui:max-w-[1280px] ui:mx-auto">
         <div class="ui:flex ui:items-end ui:justify-between ui:flex-wrap ui:gap-4 ui:mb-14">
           <div>
-              <p
-                class="ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
-              >
+            <p class="ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3">
               {labels?.catalogEyebrow ?? '// catalog'}
             </p>
             <h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:m-0">
               {labels?.catalogHeading ?? 'Latest courses'}
             </h2>
           </div>
-            {#if hasMoreCourses}
+          {#if hasMoreCourses && courses.length > 0}
             <Button
               href={disableCourseLinks ? undefined : '/courses'}
               variant="outline"
@@ -64,6 +63,9 @@
           {/if}
         </div>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           <div
             class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]"
           >
@@ -71,9 +73,9 @@
               <TechCourseCard {course} {disableCourseLinks} {labels} />
             {/each}
           </div>
+        {/if}
       </div>
     </section>
-    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="tech" />

packages/ui/src/custom/org-landing-page/terminal/org.svelte

@@ -7,6 +7,7 @@
   import TerminalNav from './nav.svelte';
   import TerminalHero from './hero.svelte';
   import TerminalCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { Button } from '../../../base/button';
   import { themeStyle } from '../theme-style';
   import { getCourseTypeLandingMeta } from '../landing-page-utils';
@@ -19,6 +20,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -81,7 +83,6 @@
       {/snippet}
     </TerminalHero>
 
-    {#if courses.length > 0}
     <section
       class="ui:py-24 ui:px-6 ui:bg-[var(--landing-bg)]"
       style="border-top: 1px solid var(--landing-border-soft);"
@@ -109,6 +110,9 @@
             'Tracks built around real-world artifacts — pull requests, postmortems, and runbooks. No filler.'}
         </p>
 
+        {#if coursesLoaded && courses.length === 0}
+          <OrgLandingPageCoursesEmpty {labels} />
+        {:else}
           {#if tabs.length > 1}
             <div
               class="ui:inline-flex ui:items-center ui:gap-0.5 ui:p-1 ui:rounded-full ui:mb-8 ui:bg-[var(--landing-card)]"
@@ -151,9 +155,9 @@
               </Button>
             </div>
           {/if}
+        {/if}
       </div>
     </section>
-    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="terminal" />

packages/ui/src/custom/org-landing-page/types.ts

@@ -178,6 +178,10 @@ export interface OrgLandingPageLabels {
   calloutEyebrow?: string;
   /** Card footer CTA on the resources/links section. Default per template ("Learn more", "Visit"). Separate from the existing per-template `boldVisitLabel` / `classicLearnMoreLabel` on `LandingPageLinks`, which still apply to those specific templates. */
   learnMoreLabel?: string;
+  /** Empty catalog title when no courses are published. Default: "No courses published yet". */
+  catalogEmptyTitle?: string;
+  /** Empty catalog description when no courses are published. Default: "Check back soon for new programs." */
+  catalogEmptyDescription?: string;
 }
 
 export type CourseCurriculumLesson = {
@@ -342,6 +346,8 @@ export interface OrgLandingPageProps {
   };
   courses: CourseItem[];
   hasMoreCourses?: boolean;
+  /** When false, templates suppress the empty catalog state while courses are still loading. */
+  coursesLoaded?: boolean;
   disableCourseLinks?: boolean;
   embed?: LandingPageEmbed;
   callout?: LandingPageCallout;

packages/ui/src/custom/org-landing-page/vibrant/org.svelte

@@ -7,6 +7,7 @@
   import VibrantNav from './nav.svelte';
   import VibrantHero from './hero.svelte';
   import VibrantCourseCard from './course-card.svelte';
+  import OrgLandingPageCoursesEmpty from '../courses-empty.svelte';
   import { themeStyle } from '../theme-style';
   import { Button } from '../../../base/button';
   import { getCourseTypeLandingMeta, defaultLessonsLabel, defaultExercisesLabel } from '../landing-page-utils';
@@ -19,6 +20,7 @@
     hero,
     courses,
     hasMoreCourses = false,
+    coursesLoaded = true,
     disableCourseLinks = false,
     embed,
     callout,
@@ -56,6 +58,13 @@
       {/snippet}
     </VibrantHero>
 
+    {#if coursesLoaded && courses.length === 0}
+      <section id="courses" class="ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-28 ui:bg-[var(--landing-bg)]">
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <OrgLandingPageCoursesEmpty {labels} />
+        </div>
+      </section>
+    {:else}
       {#if featured}
         <section
           class="ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-32"
@@ -204,6 +213,7 @@
           </div>
         </section>
       {/if}
+    {/if}
   </main>
 
   <OrgLandingPageLinks {links} {labels} variant="vibrant" />