From 0b1f646b727d5ca31608a459826e8d0af550d437 Mon Sep 17 00:00:00 2001
From: Ady Beraud <102751374+ady-beraud@users.noreply.github.com>
Date: Tue, 14 May 2024 18:59:48 +0300
Subject: [PATCH] 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
---
 .../contributors/ProfileSharing.tsx           | 16 +++++++++++-
 .../app/_components/contributors/Spinner.tsx  | 25 +++++++++++++++++++
 .../src/shared-utils/formatNumberOfStars.ts   |  2 +-
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 packages/twenty-website/src/app/_components/contributors/Spinner.tsx

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
       </StyledButton>
       <StyledButton onClick={handleDownload}>
-        <IconDownload /> Download Image
+        {loading ? (
+          <>
+            <Spinner /> Downloading
+          </>
+        ) : (
+          <>
+            <IconDownload /> Download Image
+          </>
+        )}
       </StyledButton>
       <StyledButton
         href={`http://www.twitter.com/share?url=${contributorUrl}`}
diff --git a/packages/twenty-website/src/app/_components/contributors/Spinner.tsx b/packages/twenty-website/src/app/_components/contributors/Spinner.tsx
new file mode 100644
index 000000000..cec0a6763
--- /dev/null
+++ b/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;
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';
 };