diff --git a/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx b/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx index b38e3dcb8..8519309fd 100644 --- a/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx +++ b/packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx @@ -1,9 +1,11 @@ 'use client'; +import { useState } from 'react'; import styled from '@emotion/styled'; import { IconDownload } from '@tabler/icons-react'; import { CardContainer } from '@/app/_components/contributors/CardContainer'; +import Spinner from '@/app/_components/contributors/Spinner'; import { LinkedInIcon, XIcon } from '@/app/_components/ui/icons/SvgIcons'; import { Theme } from '@/app/_components/ui/theme/theme'; @@ -52,10 +54,12 @@ interface ProfileProps { } export const ProfileSharing = ({ username }: ProfileProps) => { + const [loading, setLoading] = useState(false); const baseUrl = `${window.location.protocol}//${window.location.host}`; const contributorUrl = `${baseUrl}/contributors/${username}`; const handleDownload = async () => { + setLoading(true); const imageSrc = `${baseUrl}/api/contributors/og-image/${username}`; try { const response = await fetch(imageSrc); @@ -71,6 +75,8 @@ export const ProfileSharing = ({ username }: ProfileProps) => { window.URL.revokeObjectURL(url); } catch (error) { console.error('Error downloading the image:', error); + } finally { + setLoading(false); } }; @@ -84,7 +90,15 @@ export const ProfileSharing = ({ username }: ProfileProps) => { Share on LinkedIn - Download Image + {loading ? ( + <> + Downloading + + ) : ( + <> + Download Image + + )} ; + +export default Spinner; diff --git a/packages/twenty-website/src/shared-utils/formatNumberOfStars.ts b/packages/twenty-website/src/shared-utils/formatNumberOfStars.ts index 4adceff4d..fed51b244 100644 --- a/packages/twenty-website/src/shared-utils/formatNumberOfStars.ts +++ b/packages/twenty-website/src/shared-utils/formatNumberOfStars.ts @@ -1,3 +1,3 @@ export const formatNumberOfStars = (numberOfStars: number) => { - return Math.ceil(numberOfStars / 100) / 10 + 'k'; + return Math.round(numberOfStars / 100) / 10 + 'k'; };