feat(org): Added loading examples

sites/org/pages/typography.mjs

@@ -1,12 +1,17 @@
 // Dependencies
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Context
+import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
+// Hooks
+import { useContext } from 'react'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
+import { BoolYesIcon, BoolNoIcon } from 'shared/components/icons.mjs'
 
 // Translation namespaces used on this page
-const namespaces = [...new Set(pageNs)]
+const ns = pageNs
 
 // Re-use this
 const p = (
@@ -16,7 +21,26 @@ const p = (
   </p>
 )
 
-const TypographyPage = ({ page }) => (
+const TypographyPage = ({ page }) => {
+  const { setLoadingStatus, loading, LoadingProgress } = useContext(LoadingStatusContext)
+
+  const loadingProgression = () => {
+    let delay = 0
+    for (let i = 1; i < 51; i++) {
+      delay += 25
+      window.setTimeout(
+        () =>
+          setLoadingStatus(
+            i === 50
+              ? [true, 'All done!', true, true]
+              : [true, <LoadingProgress val={i} max={50} msg={`Herding cats: ${i}/50`} />]
+          ),
+        delay
+      )
+    }
+  }
+
+  return (
     <PageWrapper {...page} title="Typography">
       <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4">
         <p>This typography page shows an overview of different elements and how they are styled.</p>
@@ -100,16 +124,47 @@ const TypographyPage = ({ page }) => (
             </Collapse>
           )
         )}
+        <h2>Loading state</h2>
+        <p className="flex flex-row items-center flex-wrap gap-2">
+          Loading: {loading ? <BoolYesIcon /> : <BoolNoIcon />}
+        </p>
+        <div className="flex flex-row flex-wrap gap-2">
+          <button
+            className="btn btn-primary"
+            onClick={() => setLoadingStatus([true, 'status:contactingBackend'])}
+          >
+            Start loading
+          </button>
+          <button
+            className="btn btn-success"
+            onClick={() => setLoadingStatus([true, 'status:nailedIt', true, true])}
+          >
+            Stop loading, success
+          </button>
+          <button
+            className="btn btn-error"
+            onClick={() => setLoadingStatus([true, 'status:backendProblem', true, false])}
+          >
+            Stop loading, failure
+          </button>
+          <button className="btn btn-neutral" onClick={() => setLoadingStatus([false])}>
+            Stop loading, abruptly
+          </button>
+          <button className="btn btn-accent" onClick={() => loadingProgression()}>
+            Show loading progression
+          </button>
+        </div>
       </div>
     </PageWrapper>
   )
+}
 
 export default TypographyPage
 
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, namespaces)),
+      ...(await serverSideTranslations(locale, ns)),
       page: {
         locale,
         path: ['typography'],

sites/shared/i18n/status/en.yaml

@@ -1,12 +1,14 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
 backendError: Backend returned an error
-copiedToClipboard: Copied to clipboard
-processingUpdate: Processing update
-generatingPdf: Generating your PDF, one moment please
-pdfReady: PDF generated
-pdfFailed: An unexpected error occured while generating your PDF
 contactingBackend: Contacting the FreeSewing backend
-dataLoaded: Loaded data from the FreeSewing backend
 contactingGitHub: Contacting GitHub
 contactingGoogle: Contacting Google
+copiedToClipboard: Copied to clipboard
+dataLoaded: Loaded data from the FreeSewing backend
+generatingPdf: Generating your PDF, one moment please
+nailedIt: Nailed it!
+pdfFailed: An unexpected error occured while generating your PDF
+pdfReady: PDF generated
+processingUpdate: Processing update
+settingsSaved: Settings saved
+updatingSettings: Updating settings
+

sites/shared/i18n/toast/de.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Einstellungen gespeichert
-backendError: Backend hat einen Fehler zurückgegeben
-copiedToClipboard: In die Zwischenablage kopiert
-processingUpdate: Processing update

sites/shared/i18n/toast/en.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copied to clipboard
-processingUpdate: Processing update

sites/shared/i18n/toast/es.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copiado al portapapeles
-processingUpdate: Processing update

sites/shared/i18n/toast/fr.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copié dans le presse-papier
-processingUpdate: Processing update

sites/shared/i18n/toast/nl.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Gekopieerd naar het klembord
-processingUpdate: Processing update

sites/shared/i18n/toast/uk.yaml

@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Скопійовано в буфер обміну
-processingUpdate: Processing update