diff --git a/modules/desktop/package.json b/modules/desktop/package.json
index c2ccebd..d603a9e 100644
--- a/modules/desktop/package.json
+++ b/modules/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tea",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "private": true,
   "description": "tea gui app",
   "author": "tea.xyz",
diff --git a/modules/desktop/src/routes/packages/[slug]/+page.svelte b/modules/desktop/src/routes/packages/[slug]/+page.svelte
index ef16375..ab37a47 100644
--- a/modules/desktop/src/routes/packages/[slug]/+page.svelte
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import "$appcss";
   import { t } from "$libs/translations";
-
-  import Spinner from "@tea/ui/spinner/spinner.svelte";
+  import SkeletonLoader from "@tea/ui/skeleton-loader/skeleton-loader.svelte";
   import { page } from "$app/stores";
   // import PageHeader from '$components/page-header/page-header.svelte';
   import PackageBanner from "$components/package-banner/package-banner.svelte";
@@ -86,8 +85,8 @@
     <section class="mt-8 flex gap-8">
       <div class="w-2/3">
         {#if tabs.length === 0}
-          <div class="flex w-full justify-center py-20">
-            <Spinner />
+          <div class="flex w-full justify-center py-10">
+            <SkeletonLoader />
           </div>
         {/if}
         <Tabs {tabs} defaultTab={$t("common.details")} />
diff --git a/modules/ui/package.json b/modules/ui/package.json
index 40ecd4a..ae3c9b0 100644
--- a/modules/ui/package.json
+++ b/modules/ui/package.json
@@ -55,10 +55,12 @@
   "dependencies": {
     "@magidoc/plugin-svelte-prismjs": "^3.0.6",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@types/he": "^1.2.0",
     "@types/prismjs": "^1.26.0",
+    "he": "^1.2.0",
     "prismjs": "^1.29.0",
+    "restructured": "0.0.11",
     "svelte-markdown": "^0.2.3",
-    "svelte-watch-resize": "^1.0.3",
-    "restructured": "0.0.11"
+    "svelte-watch-resize": "^1.0.3"
   }
 }
diff --git a/modules/ui/src/markdown/link.svelte b/modules/ui/src/markdown/link.svelte
index 344db49..b6114b6 100644
--- a/modules/ui/src/markdown/link.svelte
+++ b/modules/ui/src/markdown/link.svelte
@@ -1,7 +1,18 @@
 <script>
+  import he from "he";
   export let href = "";
   export let title = "";
   let isBlank = href.includes("http") || href.includes("https");
+  let isEmail = href.includes("mailto");
+  console.log("href", href);
+
+  const email = isEmail ? he.decode(href.replace("mailto:", "")) : "";
 </script>
 
-<a {href} {title} target={isBlank ? "_blank" : ""} rel=""><slot /></a>
+<a href={email ? `mailto:${email}` : href} {title} target={isBlank ? "_blank" : ""} rel="">
+  {#if isEmail}
+    {email}
+  {:else}
+    <slot />
+  {/if}
+</a>
diff --git a/modules/ui/src/skeleton-loader/skeleton-loader.svelte b/modules/ui/src/skeleton-loader/skeleton-loader.svelte
new file mode 100644
index 0000000..dbf96f2
--- /dev/null
+++ b/modules/ui/src/skeleton-loader/skeleton-loader.svelte
@@ -0,0 +1,8 @@
+<div role="status" class="w-full animate-pulse">
+  <div class="mb-4 h-2.5 w-48 rounded-full bg-gray opacity-50 dark:opacity-30" />
+  <div class="mb-2.5 h-2 max-w-[360px] rounded-full bg-gray opacity-50 dark:opacity-30" />
+  <div class="mb-2.5 h-2 rounded-full bg-gray opacity-50 dark:opacity-30" />
+  <div class="mb-2.5 h-2 max-w-[330px] rounded-full bg-gray opacity-50 dark:opacity-30" />
+  <div class="mb-2.5 h-2 max-w-[300px] rounded-full bg-gray opacity-50 dark:opacity-30" />
+  <div class="h-2 max-w-[360px] rounded-full bg-gray opacity-50 dark:opacity-30" />
+</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38c1334..bd0e144 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,6 +213,7 @@ importers:
       '@sveltejs/kit': ^1.0.0
       '@sveltejs/package': ^1.0.1
       '@tailwindcss/line-clamp': ^0.4.2
+      '@types/he': ^1.2.0
       '@types/prismjs': ^1.26.0
       '@typescript-eslint/eslint-plugin': ^5.27.0
       '@typescript-eslint/parser': ^5.27.0
@@ -221,6 +222,7 @@ importers:
       eslint-config-prettier: ^8.3.0
       eslint-plugin-storybook: ^0.6.7
       eslint-plugin-svelte3: ^4.0.0
+      he: ^1.2.0
       postcss: ^8.4.19
       prettier: ^2.8.8
       prettier-plugin-svelte: ^2.10.0
@@ -240,7 +242,9 @@ importers:
     dependencies:
       '@magidoc/plugin-svelte-prismjs': 3.6.4_prismjs@1.29.0
       '@tailwindcss/line-clamp': 0.4.4_tailwindcss@3.3.2
+      '@types/he': 1.2.0
       '@types/prismjs': 1.26.0
+      he: 1.2.0
       prismjs: 1.29.0
       restructured: 0.0.11
       svelte-markdown: 0.2.3_svelte@3.59.1
@@ -3851,6 +3855,10 @@ packages:
       '@types/node': 20.1.1
     dev: true
 
+  /@types/he/1.2.0:
+    resolution: {integrity: sha512-uH2smqTN4uGReAiKedIVzoLUAXIYLBTbSofhx3hbNqj74Ua6KqFsLYszduTrLCMEAEAozF73DbGi/SC1bzQq4g==}
+    dev: false
+
   /@types/http-cache-semantics/4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
 
@@ -7858,7 +7866,6 @@ packages:
   /he/1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
-    dev: true
 
   /help-me/3.0.0:
     resolution: {integrity: sha512-hx73jClhyk910sidBB7ERlnhMlFsJJIBqSVMFDwPN8o2v9nmp5KgLq1Xz1Bf1fCMMZ6mPrX159iG0VLy/fPMtQ==}