Updated md loader

app/help/[article]/loading.tsx

@@ -1,5 +1,5 @@
-import { Loader } from "@/components/loader";
+import { MDSkeletonLoader } from "@/components/loader";
 
 export default function Loading() {
-  return <Loader />;
+  return <MDSkeletonLoader />;
 }

app/help/[article]/page.tsx

@@ -1,7 +1,7 @@
 import { readMD } from "@/actions/readMD";
 import { HelpClient } from "./client";
 import { Suspense } from "react";
-import { Loader } from "@/components/loader";
+import { MDSkeletonLoader } from "@/components/loader";
 
 // export const
 
@@ -15,7 +15,7 @@ export default async function Help({
     "./md/help articles/" + decodeURIComponent(params.article),
   );
   return (
-    <Suspense fallback={<Loader />}>
+    <Suspense fallback={<MDSkeletonLoader />}>
       <HelpClient
         body={body}
         title={decodeURIComponent(params.article).replace(".md", "")}

app/page.tsx

@@ -3,7 +3,7 @@ import { TTCMD } from "@/components/ttcmd";
 import { readFile } from "fs/promises";
 import { Suspense } from "react";
 import { HomeClient } from "./client";
-import { Loader } from "@/components/loader";
+import { MDSkeletonLoader } from "@/components/loader";
 
 export default function Home() {
   const body = readMD("./md/home.md");
@@ -135,7 +135,7 @@ export default function Home() {
         </cite>
       </section> */
       }
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<MDSkeletonLoader />}>
         <HomeClient body={body} />
       </Suspense>
     </>

components/loader.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-export const Loader: FC = () => {
+export const MDSkeletonLoader: FC = () => {
   const tragedy = [
     "Did you ever hear the tragedy of Darth Plagueis the Wise?",
     "No.",
@@ -13,14 +13,75 @@ export const Loader: FC = () => {
     "Not from a Jedi.",
   ];
 
+  const bucket = [
+    "Dear God",
+    "Theres more",
+    "No!",
+    "It contains, a bucket!",
+  ];
+
+  const indentation = ["ml-0", "ml-6", "ml-12"];
+
   return (
     <>
       <section className="heading">
-        <h2 className="strapline skeleton">Do It</h2>
-        <h1 className="skeleton">Kill him. Kill him now.</h1>
+        <h2 className="strapline skeleton w-min whitespace-nowrap">Do It</h2>
+        <h1 className="skeleton w-min whitespace-nowrap">
+          Kill him. Kill him now.
+        </h1>
       </section>
-      <section>
-        {tragedy.map((t) => <p key={t} className=".skeleton">{t}</p>)}
+      <section className="grid grid-cols-3">
+        <div className="col-span-2">
+          {tragedy.map((t) => (
+            <p key={t} className="my-2 leading-8">
+              <span className="skeleton p-1">{t}</span>
+            </p>
+          ))}
+          <div className="col-span-2 grid grid-cols-3 my-6 gap-8">
+            <div className="card skeleton h-36"></div>
+            <div>
+              <p>
+                <span className="skeleton">Hey man I heard you like memes</span>
+              </p>
+              <p>
+                <span className="skeleton">
+                  I&apos;ll be honest, I&apos;m just kind of phoning it in down
+                  here. The other memes came to mind really easily, but I could
+                  think of anything for down here. Ooh look, lorem ipsum!
+                </span>
+              </p>
+              <p>
+                <span className="skeleton">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                  Exercitationem fugiat sed odit sunt ex ab maxime qui animi
+                  optio! Rem itaque nesciunt beatae voluptas facilis optio natus
+                  culpa. Corrupti, error.
+                </span>
+              </p>
+            </div>
+            <div className="card skeleton h-48"></div>
+          </div>
+        </div>
+        <div className="mt-4">
+          <h3 className="text-3xl skeleton w-min whitespace-nowrap">
+            This is a bucket
+          </h3>
+          <ul className="list-disc ml-6 ">
+            {Array(Math.floor(Math.random() * 3) + 2).fill(bucket).flat().map((
+              t,
+              i,
+            ) => (
+              <li
+                key={t}
+                className={"my-2 leading-8 text-black/20 " + indentation[
+                  i === 0 ? 0 : Math.floor(Math.random() * indentation.length)
+                ]}
+              >
+                <span className="skeleton p-1">{t}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
       </section>
     </>
     // <div className="mx-auto text-9xl flex justify-center py-24">

components/ttcmd/index.tsx

@@ -15,7 +15,7 @@ import React, {
 } from "react";
 
 import { sanitize } from "isomorphic-dompurify";
-import { Loader } from "../loader";
+import { MDSkeletonLoader } from "../loader";
 
 export const TTCMD: FC<
   { body: string; escapeTOC?: (tokens: Token[]) => boolean }
@@ -44,14 +44,16 @@ export const TTCMD: FC<
   }, [escapeTOC, toc]);
 
   return (
-    <Suspense fallback={<Loader />}>
-      <button
+    <Suspense fallback={<MDSkeletonLoader />}>
+      {
+        /* <button
         className="btn-primary"
         onClick={() =>
           navigator.clipboard.writeText(JSON.stringify(elements, null, 2))}
       >
         copy ast
-      </button>
+      </button> */
+      }
       {hasEscapedTOC !== undefined &&
         (
           <TTCMDRenderer