feat: show loading state for back side

src/pages/Learn/helpers/getBackSide.tsx

@@ -2,19 +2,24 @@ import { useEffect, useState } from 'react';
 import Backend from '../../../lib/backend';
 
 type BackSide = {
-  data: string;
+  backSide: string;
+  loading: boolean;
 };
 
-export const getBackSide = (id: string | undefined) => {
-  const backend = new Backend();
+export const getBackSide = (id: string | undefined): BackSide => {
   const [backSide, setBackSide] = useState('loading');
+  const [loading, setLoading] = useState(false);
+  const backend = new Backend();
+
   useEffect(() => {
+    setLoading(true);
     if (id) {
       backend.renderBlock(id).then((response: unknown) => {
-        const res = response as BackSide;
+        const res = response as { data: string };
         setBackSide(res.data);
+        setLoading(false);
       });
     }
   }, [id]);
-  return backSide;
+  return { loading, backSide };
 };

src/pages/Learn/index.tsx

@@ -19,7 +19,7 @@ function LearnPage({ setError }: Props) {
   const location = useLocation();
 
   const block = children ? children[index - 1] : null;
-  const backSide = getBackSide(block?.id);
+  const { loading, backSide } = getBackSide(block?.id);
   // Load parent page based on id
   useEffect(() => {
     setParentId(location.pathname.split('/').at(-1) || null);
@@ -32,8 +32,6 @@ function LearnPage({ setError }: Props) {
     return <LoadingPage />;
   }
 
-  console.log('block', block);
-
   return (
     <PageContainer>
       <h1>Learn</h1>
@@ -69,6 +67,11 @@ function LearnPage({ setError }: Props) {
             <span style={{ fontSize: '11px' }}>
               {index + 1} /{children.length}
             </span>
+            {loading && (
+              <button type="button" className="is-loading button">
+                loading
+              </button>
+            )}
             <button
               type="button"
               onClick={() => setIndex(Math.max(index - 1, 0))}