feat: add a page loading indicator

Author: Nemikolh

packages/astro/src/default/components/PageLoadingIndicator.astro

@@ -0,0 +1,58 @@
+<div
+  data-id="page-loading-progress"
+  class="fixed transition-all top-0 z-90 h-[2px] opacity-100 pointer-events-none bg-tk-elements-pageLoadingIndicator-backgroundColor"
+>
+  <div
+    class="absolute right-0 w-24 h-full shadow-[0px_0px_10px_0px] shadow-tk-elements-pageLoadingIndicator-shadowColor"
+  >
+  </div>
+</div>
+<script>
+  const progressEl = document.querySelector('[data-id="page-loading-progress"]') as HTMLDivElement;
+  const storageKey = 'tk_plid';
+
+  let expectedDuration = parseFloat(localStorage.getItem(storageKey) || '1000');
+
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let startTime = Date.now();
+
+  function start() {
+    clearTimeout(timeoutId);
+
+    startTime = Date.now();
+
+    progressEl.style.width = '0%';
+    progressEl.style.opacity = '1';
+
+    intervalId = setInterval(() => {
+      const elapsedTime = Date.now() - startTime;
+
+      progressEl.style.width = `${Math.min(elapsedTime / expectedDuration, 1) * 100}%`;
+
+      if (elapsedTime > expectedDuration) {
+        clearInterval(intervalId);
+        return;
+      }
+    }, 100);
+  }
+
+  function done() {
+    clearInterval(intervalId);
+    progressEl.style.width = '100%';
+
+    expectedDuration = Date.now() - startTime;
+    localStorage.setItem(storageKey, expectedDuration.toString());
+
+    timeoutId = setTimeout(() => {
+      progressEl.style.opacity = '0';
+
+      timeoutId = setTimeout(() => {
+        progressEl.style.width = '0%';
+      }, 100);
+    }, 200);
+  }
+
+  document.addEventListener('astro:before-preparation', start);
+  document.addEventListener('astro:after-swap', done);
+</script>

packages/astro/src/default/pages/[...slug].astro

@@ -2,6 +2,7 @@
 import type { InferGetStaticPropsType } from 'astro';
 import TopBarWrapper from '../components/TopBarWrapper.astro';
 import MainContainer from '../components/MainContainer.astro';
+import PageLoadingIndicator from '../components/PageLoadingIndicator.astro';
 import Layout from '../layouts/Layout.astro';
 import '../styles/base.css';
 import '@tutorialkit/custom.css';
@@ -17,6 +18,7 @@ const { lesson, logoLink, navList, title } = Astro.props as Props;
 ---
 
 <Layout title={title}>
+  <PageLoadingIndicator />
   <div id="previews-container"></div>
   <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>
     <TopBarWrapper logoLink={logoLink ?? '/'} />

packages/astro/src/default/styles/variables.css

@@ -141,6 +141,10 @@
   --tk-elements-content-textColor: var(--tk-text-body);
   --tk-elements-content-headingTextColor: var(--tk-text-primary);
 
+  /* Page loading indicator */
+  --tk-elements-pageLoadingIndicator-backgroundColor: var(--tk-background-accent);
+  --tk-elements-pageLoadingIndicator-shadowColor: var(--tk-background-accent);
+
   /* Top Bar */
   --tk-elements-topBar-backgroundColor: var(--tk-elements-app-backgroundColor);
 

packages/components/react/src/BootScreen.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useStore } from '@nanostores/react';
 import type { Step, TutorialStore } from '@tutorialkit/runtime';
 import { classNames } from './utils/classnames.js';
@@ -12,9 +13,16 @@ export function BootScreen({ className, tutorialStore }: Props) {
   const { startWebContainerText, noPreviewNorStepsText } = tutorialStore.lesson?.data.i18n ?? {};
   const bootStatus = useStore(tutorialStore.bootStatus);
 
+  // workaround to prevent the hydration error caused by bootStatus always being 'unknown' server-side
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <div className={classNames('flex-grow w-full flex justify-center items-center text-sm', className)}>
-      {bootStatus === 'blocked' ? (
+      {isClient && bootStatus === 'blocked' ? (
         <Button onClick={() => tutorialStore.unblockBoot()}>{startWebContainerText}</Button>
       ) : steps ? (
         <ul className="space-y-1">

packages/components/react/src/Nav.tsx

@@ -76,7 +76,7 @@ export function Nav({ lesson: currentLesson, navList }: Props) {
                 transition={{ duration: 0.2, ease: dropdownEasing }}
                 className=" overflow-hidden transition-theme bg-tk-elements-breadcrumbs-dropdown-backgroundColor"
               >
-                {renderParts(navList, currentLesson)}
+                {renderParts(navList, currentLesson, onOutsideClick)}
               </motion.nav>
             )}
           </AnimatePresence>
@@ -96,7 +96,7 @@ export function Nav({ lesson: currentLesson, navList }: Props) {
   );
 }
 
-function renderParts(navList: NavList, currentLesson: Lesson) {
+function renderParts(navList: NavList, currentLesson: Lesson, onLinkClick: () => void) {
   return (
     <ul className="py-5 pl-5 border-t border-tk-elements-breadcrumbs-dropdown-borderColor overflow-auto max-h-[60dvh]">
       <Accordion.Root className="space-y-1.5" type="single" collapsible defaultValue={`part-${currentLesson.part.id}`}>
@@ -124,7 +124,7 @@ function renderParts(navList: NavList, currentLesson: Lesson) {
                   </span>
                 </Accordion.Trigger>
                 <Accordion.Content className={navStyles.AccordionContent}>
-                  {renderChapters(currentLesson, part, isPartActive)}
+                  {renderChapters(currentLesson, part, isPartActive, onLinkClick)}
                 </Accordion.Content>
               </Accordion.Item>
             </li>
@@ -135,7 +135,7 @@ function renderParts(navList: NavList, currentLesson: Lesson) {
   );
 }
 
-function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: boolean) {
+function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: boolean, onLinkClick: () => void) {
   return (
     <ul className="pl-4.5 mt-1.5">
       <Accordion.Root
@@ -171,7 +171,7 @@ function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: bool
                   <span>{chapter.title}</span>
                 </Accordion.Trigger>
                 <Accordion.Content className={navStyles.AccordionContent}>
-                  {renderLessons(currentLesson, chapter, isPartActive, isChapterActive)}
+                  {renderLessons(currentLesson, chapter, isPartActive, isChapterActive, onLinkClick)}
                 </Accordion.Content>
               </Accordion.Item>
             </li>
@@ -182,7 +182,13 @@ function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: bool
   );
 }
 
-function renderLessons(currentLesson: Lesson, chapter: NavItem, isPartActive: boolean, isChapterActive: boolean) {
+function renderLessons(
+  currentLesson: Lesson,
+  chapter: NavItem,
+  isPartActive: boolean,
+  isChapterActive: boolean,
+  onLinkClick: () => void,
+) {
   return (
     <ul className="pl-9 mt-1.5">
       {chapter.sections?.map((lesson, lessonIndex) => {
@@ -191,6 +197,7 @@ function renderLessons(currentLesson: Lesson, chapter: NavItem, isPartActive: bo
         return (
           <li key={lessonIndex} className="mr-3">
             <a
+              onClick={onLinkClick}
               className={classNames(
                 'w-full inline-block border border-transparent pr-3 transition-theme text-tk-elements-breadcrumbs-dropdown-lessonTextColor hover:text-tk-elements-breadcrumbs-dropdown-lessonTextColorHover px-3 py-1 rounded-1',
                 {

packages/theme/src/theme.ts

@@ -148,6 +148,10 @@ export const theme = {
           textColor: 'var(--tk-elements-content-textColor)',
           headingTextColor: 'var(--tk-elements-content-headingTextColor)',
         },
+        pageLoadingIndicator: {
+          backgroundColor: 'var(--tk-elements-pageLoadingIndicator-backgroundColor)',
+          shadowColor: 'var(--tk-elements-pageLoadingIndicator-shadowColor)',
+        },
         topBar: {
           backgroundColor: 'var(--tk-elements-topBar-backgroundColor)',
           iconButton: {