From 272ebbc2baa60de07330d03a2b72cb4e070d1017 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 Jan 2026 21:05:45 +0530
Subject: [PATCH] fix: follow-button-message

---
 .../src/lib/fragments/Profile/Profile.svelte  | 47 ++++++++++++++++++-
 .../(protected)/profile/[id]/+page.svelte     |  7 ++-
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/Profile/Profile.svelte b/platforms/pictique/src/lib/fragments/Profile/Profile.svelte
index 8e890c837..f681acc57 100644
--- a/platforms/pictique/src/lib/fragments/Profile/Profile.svelte
+++ b/platforms/pictique/src/lib/fragments/Profile/Profile.svelte
@@ -1,23 +1,40 @@
 <script lang="ts">
 	import type { PostData, userProfile } from '$lib/types';
 	import { Button } from '$lib/ui';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import Post from '../Post/Post.svelte';
+	import { Spring } from 'svelte/motion';
+	import { Tick01Icon } from '@hugeicons/core-free-icons';
 
 	let {
 		variant = 'user',
 		profileData,
 		handleFollow,
 		handleSinglePost,
-		handleMessage
+		handleMessage,
+		isFollowing = $bindable(false)
 	}: {
 		variant: 'user' | 'other';
 		profileData: userProfile;
 		handleSinglePost: (post: PostData) => void;
 		handleFollow: () => Promise<void>;
 		handleMessage: () => Promise<void>;
+		isFollowing: boolean;
 	} = $props();
 
 	let imgPosts = $derived(profileData.posts.filter((e) => e.imgUris && e.imgUris.length > 0));
+	let requestSent = $state(false);
+
+	const btnScale = new Spring(1, { stiffness: 0.2, damping: 0.4 });
+
+	async function wrappedFollow() {
+		btnScale.target = 0.95;
+
+		await handleFollow();
+		requestSent = true;
+
+		btnScale.target = 1;
+	}
 </script>
 
 <div class="flex flex-col gap-4 p-4">
@@ -36,7 +53,33 @@
 		</div>
 		{#if variant === 'other'}
 			<div class="flex gap-2">
-				<Button variant="primary" size="sm" callback={handleFollow}>Follow</Button>
+				<div style="transform: scale({btnScale.current}); transition: transform 0.2s ease;">
+					<Button
+						variant={'primary'}
+						size="sm"
+						callback={wrappedFollow}
+						disabled={isFollowing || requestSent}
+						class="min-w-[110px] transition-all duration-500 {requestSent
+							? 'opacity-80'
+							: ''}"
+					>
+						<div class="flex items-center justify-center gap-2">
+							{#if requestSent}
+								<HugeiconsIcon icon={Tick01Icon} size={16} />
+								<span>Followed</span>
+							{:else if isFollowing}
+								<span class="flex gap-0.5">
+									<span class="animate-bounce">.</span>
+									<span class="animate-bounce [animation-delay:0.2s]">.</span>
+									<span class="animate-bounce [animation-delay:0.4s]">.</span>
+								</span>
+								<span>Following</span>
+							{:else}
+								Follow
+							{/if}
+						</div>
+					</Button>
+				</div>
 				<Button variant="primary" size="sm" callback={handleMessage}>Message</Button>
 			</div>
 		{/if}
diff --git a/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
index 06c2c53ae..dba5ae8a2 100644
--- a/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
@@ -15,6 +15,7 @@
 	let error = $state<string | null>(null);
 	let loading = $state(true);
 	let ownerId: string | null = $derived(getAuthId());
+	let isFollowing = $state(false);
 	let ownerProfile = $derived.by(async () => {
 		if (ownerId) {
 			const response = await apiClient.get<userProfile>(`/api/users/${ownerId}`);
@@ -39,10 +40,13 @@
 
 	async function handleFollow() {
 		try {
+			isFollowing = true;
 			await apiClient.post(`/api/users/${profileId}/follow`);
-			await fetchProfile(); // Refresh profile to update follower count
+			// await fetchProfile(); // Refresh profile to update follower count
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to follow user';
+		} finally {
+			isFollowing = false;
 		}
 	}
 
@@ -79,6 +83,7 @@
 		</div>
 	{:else if profile}
 		<Profile
+			bind:isFollowing
 			variant={ownerId === profileId ? 'user' : 'other'}
 			profileData={profile}
 			handleSinglePost={(post) => handlePostClick(post)}