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';
};