Added loader to Download Image + modified GitHub stars (#5407)

- Added loader to download image in contributor page:


https://github.com/twentyhq/twenty/assets/102751374/a6db1d80-01ed-4b07-9a57-e533012f5aa9

- Modified GitHub stars - rounded to the nearest integer

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
       </StyledButton>
       <StyledButton onClick={handleDownload}>
-        <IconDownload /> Download Image
+        {loading ? (
+          <>
+            <Spinner /> Downloading
+          </>
+        ) : (
+          <>
+            <IconDownload /> Download Image
+          </>
+        )}
       </StyledButton>
       <StyledButton
         href={`http://www.twitter.com/share?url=${contributorUrl}`}

packages/twenty-website/src/app/_components/contributors/Spinner.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const SpinnerWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top: 4px solid black;
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+
+const Spinner = () => <SpinnerWrapper />;
+
+export default Spinner;

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