Loaders, Spinners added and UI improvements

package.json

@@ -17,6 +17,7 @@
     "autoprefixer": "^10.4.20",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.5",
+    "svelte-loading-spinners": "^0.3.6",
     "svelte-routing": "^2.13.0",
     "tailwindcss": "^3.4.9",
     "tslib": "^2.6.3",

src/App.svelte

@@ -53,7 +53,6 @@
     //@ts-ignore
     async function handlePostSubmit(event) {
         console.log("New post submitted:", event.detail.content);
-        // Handle post submission logic here
     }
 </script>
 
@@ -62,22 +61,8 @@
         <aside
             class="w-64 bg-white shadow-lg flex flex-col justify-between p-4"
         >
-            <div class="space-y-4">
-                <div class="p-2">
-                    <svg
-                        class="w-8 h-8 text-secondary-500"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <path
-                            d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
-                        ></path>
-                    </svg>
-                </div>
+            <div class="space-y-4 pt-16">
+
                 <nav>
                     <ul class="space-y-2">
                         {#each menuItems as item}

src/lib/Post.svelte

@@ -0,0 +1,30 @@
+<script>
+       export let id;
+       export let username;
+       export let text;
+       export let likes;
+       export let retweets;
+       export let onLike;
+       export let onRetweet;
+
+       function handleLike() {
+              // onLike(id);
+       }
+
+       function handleRetweet() {
+              // onRetweet(id);
+       }
+</script>
+
+<article>
+       <header>
+              <h2>{username}</h2>
+              <p>{text}</p>
+       </header>
+       <footer>
+              <span class="likes">{likes} likes</span> |
+              <span class="retweets">{retweets} retweets</span> |
+              <button on:click={handleLike}>Like</button> |
+              <button on:click={handleRetweet}>Retweet</button>
+       </footer>
+</article>

src/lib/components/Feed.svelte

@@ -3,22 +3,35 @@
   import Tweet from '$lib/components/Tweet.svelte';
   import { fetchMemes } from '$lib/ao/mememaker';
   import type { Meme } from "$lib/models/Meme";
+  import Spinner from '$lib/components/Spinner.svelte';
+
   let memes: Meme[] = [];
+  let loading = true;
+
   onMount(async () => {
     try {
       memes = await fetchMemes("1", "100");
     } catch (error) {
       console.error('Error fetching memes:', error);
+    } finally {
+      loading = false;
     }
   });
 </script>
 
 <div class="max-w-4xl mx-auto p-4">
-  <div class="space-y-6">
-    {#each memes as meme (meme.Pool)}
-      <Tweet {meme} />
-    {/each}
+  {#if loading}
+  <div>
+    <Spinner />
   </div>
+
+  {:else}
+    <div class="space-y-6">
+      {#each memes as meme (meme.Pool)}
+        <Tweet {meme} />
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>

src/lib/components/ProfileView.svelte

@@ -99,53 +99,61 @@
 
 <div class="max-w-4xl mx-auto p-4">
   <Card
-    class="mb-8 overflow-hidden transition-all duration-300 hover:shadow-xl"
+    class="mb-10 overflow-hidden transition-transform transform hover:scale-105 duration-300 shadow-lg rounded-lg"
   >
-    <div class="bg-gradient-to-r from-secondary-500 to-pink-500 p-6">
-      <div class="flex items-center space-x-4">
-        <Avatar class="h-24 w-24 ring-4 ring-white">
+    <!-- Gradient Header -->
+    <div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-8">
+      <div class="flex items-center space-x-6">
+        <!-- Avatar with Border -->
+        <Avatar class="h-28 w-28 rounded-full ring-4 ring-white shadow-lg">
           <AvatarImage src={toUrl(profile.Image)} alt={profile.Name} />
           <AvatarFallback>{profile.Name}</AvatarFallback>
         </Avatar>
+        <!-- Profile Info -->
         <div>
-          <h1 class="text-3xl font-extrabold text-white">
+          <h1 class="text-4xl font-extrabold text-white leading-tight">
             {profile.Name}
           </h1>
-          <p class="text-secondary-200">@{profile.Name}</p>
-          <p class="mt-2 text-white">{"profile.bio"}</p>
+          <p class="text-lg text-pink-100">@{profile.Name}</p>
+          <p class="mt-4 text-white opacity-90">{profile.bio}</p>
         </div>
       </div>
     </div>
+
+    <!-- Card Content with Blur Effect -->
     <CardContent
-      class="bg-white bg-opacity-50 backdrop-filter backdrop-blur-lg"
+      class="bg-white bg-opacity-70 backdrop-filter backdrop-blur-lg p-6 rounded-b-lg"
     >
-      <div class="flex justify-between mt-6">
+      <div class="flex justify-between mt-6 space-x-4">
+        <!-- Followers -->
         <div class="text-center">
           <p
             in:fly={{ y: 20, duration: 500 }}
-            class="text-2xl font-semibold text-secondary-600"
+            class="text-3xl font-semibold text-purple-600"
           >
             {"1,000"}
           </p>
-          <p class="text-gray-500">Followers</p>
+          <p class="text-gray-600">Followers</p>
         </div>
+        <!-- Following -->
         <div class="text-center">
           <p
             in:fly={{ y: 20, duration: 500, delay: 100 }}
-            class="text-2xl font-semibold text-secondary-600"
+            class="text-3xl font-semibold text-pink-600"
           >
             {"1"}
           </p>
-          <p class="text-gray-500">Following</p>
+          <p class="text-gray-600">Following</p>
         </div>
+        <!-- Market Cap -->
         <div class="text-center">
           <p
             in:fly={{ y: 20, duration: 500, delay: 200 }}
-            class="text-2xl font-semibold text-secondary-600"
+            class="text-3xl font-semibold text-red-600"
           >
             ${"10,000,000"}
           </p>
-          <p class="text-gray-500">Total Market Cap</p>
+          <p class="text-gray-600">Total Market Cap</p>
         </div>
       </div>
     </CardContent>

src/lib/components/Spinner.svelte

@@ -0,0 +1,6 @@
+<div role="status" class="flex justify-center items-center">
+    <svg aria-hidden="true" class="w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+    </svg>
+</div>

src/lib/components/SwapTransaction.svelte

@@ -13,7 +13,6 @@
 
   onMount(async () => {
     try {
-      // Replace this with your actual API call to fetch swaps
       await fetchSwaps(memeId);
     } catch (error) {
       console.error("Error fetching swaps:", error);

src/lib/components/Tweet.svelte

@@ -26,10 +26,10 @@
   import type { Meme } from "$lib/models/Meme";
   import { DECIMALS } from "$lib/constants";
   // @ts-ignore
-
   import * as Tabs from "$lib/components/ui/tabs";
 
   export let meme: Meme;
+  let loading = true;
 
   function toUrl(tx: string) {
     return `https://7emz5ndufz7rlmskejnhfx3znpjy32uw73jm46tujftmrg5mdmca.arweave.net/${tx}`;
@@ -52,15 +52,20 @@
     if (isNaN(value)) return "N/A";
     return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
   }
+
+  // Simulate content loading
+  setTimeout(() => {
+    loading = false;
+  }, 1000);
 </script>
 
 <Card
-  class="overflow-hidden transition-all duration-300 hover:shadow-lg w-full bg-white"
+  class="overflow-hidden transition-all duration-300 hover:shadow-lg w-full bg-white rounded-lg"
 >
   <Link to="/Feed/{meme.Pool}" class="block w-full max-w-3xl mx-auto">
-    <CardHeader class="p-6 bg-gray-50">
+    <CardHeader class="p-6 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 border-b border-gray-200">
       <div class="flex items-center space-x-4">
-        <Avatar class="w-16 h-16 border-2 border-blue-500">
+        <Avatar class="w-16 h-16 rounded-full border-2 border-blue-500 shadow-lg">
           {#if meme.Profile}
             <AvatarImage src={toUrl(meme.Profile.Image)} alt={meme.Creator} />
           {/if}
@@ -85,69 +90,75 @@
         </div>
       </div>
     </CardHeader>
-    <CardContent class="p-6">
-      <p class="text-lg mb-4 text-gray-800">
-        {meme.Post.Kind === "0"
-          ? JSON.parse(meme.Post.Content).content
-          : meme.Post.Content}
-      </p>
-      {#if meme.Post.Kind === "0"}
-        <!-- svelte-ignore a11y-img-redundant-alt -->
-        <img
-          alt="Meme Image"
-          src={toUrl(JSON.parse(meme.Post.Content).media)}
-          class="rounded-lg object-cover w-full shadow-md"
-          style="aspect-ratio: 16/9; object-fit: cover;"
-        />
+    <CardContent class="p-6 bg-white">
+      {#if loading}
+        <div class="flex justify-center items-center h-48">
+          <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
+        </div>
+      {:else}
+        <p class="text-lg mb-4 text-gray-800 leading-relaxed">
+          {meme.Post.Kind === "0"
+            ? JSON.parse(meme.Post.Content).content
+            : meme.Post.Content}
+        </p>
+        {#if meme.Post.Kind === "0"}
+          <!-- svelte-ignore a11y-img-redundant-alt -->
+          <img
+            alt="Meme Image"
+            src={toUrl(JSON.parse(meme.Post.Content).media)}
+            class="rounded-lg object-cover w-full shadow-md"
+            style="max-height: 500px; object-fit: cover; width: 100%;"
+          />
+        {/if}
       {/if}
     </CardContent>
   </Link>
-  <CardFooter class="grid grid-cols-2 sm:grid-cols-3 gap-4 bg-gray-50 p-6">
-    <div class="flex flex-col items-center">
+  <CardFooter class="grid grid-cols-2 sm:grid-cols-3 gap-6 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 p-6">
+    <div class="flex flex-col items-center text-center">
       <DollarSign class="w-6 h-6 text-green-500 mb-1" />
-      <span class="font-semibold text-sm">Market Cap</span>
-      <span class="text-gray-600"
-        >{formatNumber(Number(meme.Analytics.MarketCap / DECIMALS))} wAr</span
-      >
+      <span class="font-semibold text-sm text-gray-700">Market Cap</span>
+      <span class="text-gray-600">
+        {formatNumber(Number(meme.Analytics.MarketCap / DECIMALS))} wAr
+      </span>
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center text-center">
       <TrendingUp class="w-6 h-6 text-blue-500 mb-1" />
-      <span class="font-semibold text-sm">Liquidty</span>
-      <span class="text-gray-600"
-        >{formatNumber(Number(meme.Analytics.Liquidty) / DECIMALS)} wAr</span
-      >
+      <span class="font-semibold text-sm text-gray-700">Liquidity</span>
+      <span class="text-gray-600">
+        {formatNumber(Number(meme.Analytics.Liquidty) / DECIMALS)} wAr
+      </span>
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center text-center">
       <Activity class="w-6 h-6 text-purple-500 mb-1" />
-      <span class="font-semibold text-sm">Buys</span>
+      <span class="font-semibold text-sm text-gray-700">Buys</span>
       <span class="text-gray-600">{meme.Analytics.Buys}</span>
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center text-center">
       <Users class="w-6 h-6 text-orange-500 mb-1" />
-      <span class="font-semibold text-sm">Holders</span>
+      <span class="font-semibold text-sm text-gray-700">Holders</span>
       <span class="text-gray-600">{meme.Holders.count}</span>
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center text-center">
       <MessageCircle class="w-6 h-6 text-indigo-500 mb-1" />
-      <span class="font-semibold text-sm">Replies</span>
+      <span class="font-semibold text-sm text-gray-700">Replies</span>
       <span class="text-gray-600">{meme.Replies}</span>
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center text-center">
       <Coins class="w-6 h-6 text-red-500 mb-1" />
-      <span class="font-semibold text-sm">Token</span>
+      <span class="font-semibold text-sm text-gray-700">Token</span>
       <a
-        class="btn text-blue-500"
+        class="btn text-blue-500 font-semibold hover:underline"
         target="_blank"
-        href={`https://www.ao.link/#/token/${meme.TokenA}`}>AOLink</a
+        href={`https://www.ao.link/#/token/${meme.TokenA}`}
+        >AOLink</a
       >
-      <span class="text-gray-600"></span>
     </div>
   </CardFooter>
   <div class="flex justify-center space-x-4 p-4 bg-gray-100">
     <Pump {meme}>
       <Button
         variant="outline"
-        class="flex items-center space-x-2 bg-green-100 hover:bg-green-200 text-green-700"
+        class="flex items-center space-x-2 bg-green-100 hover:bg-green-200 text-green-700 font-semibold py-2 px-4 rounded-lg"
       >
         <span>Pump</span>
         <span class="font-bold">{meme.Pumps}</span>
@@ -156,7 +167,7 @@
     <Dump {meme}>
       <Button
         variant="outline"
-        class="flex items-center space-x-2 bg-red-100 hover:bg-red-200 text-red-700"
+        class="flex items-center space-x-2 bg-red-100 hover:bg-red-200 text-red-700 font-semibold py-2 px-4 rounded-lg"
       >
         <span>Dump</span>
         <span class="font-bold">{meme.Dumps}</span>