feat: Add delay to lazy load and use skeleton animation

Signed-off-by: Ho <[email protected]>

src/components/Changelog.jsx

@@ -11,10 +11,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from './ui/dialog.jsx';
+import { SkeletonShortText, SkeletonCard } from './Loader.jsx';
 import { IconRocket } from '@tabler/icons-react';
-import ChangelogFetcher from '../lib/changelog.jsx';
 import { strings } from '../lib/strings.js';
 
+// Lazy load the Changelog component with delay of 2 seconds
+const ChangelogFetcher = lazy(() => {
+  return new Promise(resolve => {
+    setTimeout(() => resolve(import('../lib/changelog.jsx')), 2000);
+  });
+});
+
 const ChangelogViewer = ({ repo }) => {
   const [version, setVersion] = useState('');
   const s = strings.changelog;
@@ -35,11 +42,15 @@ const ChangelogViewer = ({ repo }) => {
           <DialogHeader>
             <DialogTitle>{s.title}</DialogTitle>
             <DialogDescription className="m-0">
-              {s.description} <strong>{version}</strong>
+              <span>
+                {s.description}
+                &nbsp;
+                {version ? <strong>{version}</strong> : <SkeletonShortText />}
+              </span>
             </DialogDescription>
           </DialogHeader>
           <div className="flex-col px-2">
-            <Suspense fallback={<p>{s.loading}</p>}>
+            <Suspense fallback={<SkeletonCard />}>
               <ChangelogFetcher repo={repo} onVersionFetched={handleVersionFetched} />
             </Suspense>
           </div>

src/components/Loader.jsx

@@ -0,0 +1,42 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonContact() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonText() {
+ return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-4 w-[250px]" />
+      <Skeleton className="h-4 w-[200px]" />
+    </div>
+  );
+}
+
+export function SkeletonShortText() {
+  return (
+    <div className='inline-block align-middle'>
+      <Skeleton className="h-4 w-[50px]" />
+    </div>
+  );
+}

src/components/ui/skeleton.jsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (<div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />);
+}
+
+export { Skeleton }