From aba602380db0f9a18a5dc9517f90b5d7a0a49bb1 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Thu, 18 Apr 2024 21:02:21 +0200
Subject: [PATCH] add simple loading icon

---
 .idea/workspace.xml              | 24 ++++++++++++++----------
 src/components/Sponsors/index.js | 18 ++++++++++++++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 5640dda1d..68efe4631 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,13 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="docs: add new plugins docs">
-      <change afterPath="$PROJECT_DIR$/src/components/Sponsors/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/Sponsors/styles.module.css" afterDir="false" />
+    <list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="initial built from the ground up page done">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/sponsors.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/sponsors.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/sponsors.module.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/sponsors.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Sponsors/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Sponsors/index.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -148,7 +144,7 @@
       <workItem from="1671119393024" duration="3889000" />
       <workItem from="1673974979200" duration="2385000" />
       <workItem from="1674757791435" duration="925000" />
-      <workItem from="1713448008567" duration="6724000" />
+      <workItem from="1713448008567" duration="8323000" />
     </task>
     <task id="LOCAL-00001" summary="feat: remove old index.html in static/">
       <created>1660418841831</created>
@@ -339,7 +335,15 @@
       <option name="project" value="LOCAL" />
       <updated>1673976828238</updated>
     </task>
-    <option name="localTasksCounter" value="28" />
+    <task id="LOCAL-00028" summary="initial built from the ground up page done">
+      <option name="closed" value="true" />
+      <created>1713463473768</created>
+      <option name="number" value="00028" />
+      <option name="presentableId" value="LOCAL-00028" />
+      <option name="project" value="LOCAL" />
+      <updated>1713463473768</updated>
+    </task>
+    <option name="localTasksCounter" value="29" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -357,7 +361,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="feat: remove old index.html in static/" />
     <MESSAGE value="feat: edit action" />
     <MESSAGE value="feat: delete needless assets/dir" />
     <MESSAGE value="feat: action changes and edit link" />
@@ -382,7 +385,8 @@
     <MESSAGE value="feat: update documentation and clarify documentation" />
     <MESSAGE value="fix: links" />
     <MESSAGE value="docs: add new plugins docs" />
-    <option name="LAST_COMMIT_MESSAGE" value="docs: add new plugins docs" />
+    <MESSAGE value="initial built from the ground up page done" />
+    <option name="LAST_COMMIT_MESSAGE" value="initial built from the ground up page done" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/Sponsors/index.js b/src/components/Sponsors/index.js
index 58ff11e2f..f53fdd26d 100644
--- a/src/components/Sponsors/index.js
+++ b/src/components/Sponsors/index.js
@@ -21,12 +21,12 @@ export default function Sponsors() {
         }
         asyncFunction()
     }, [])
-    return (
+    return sponsors.data ? (
         <div className={styles.sponsorLayout}>
             {sponsors.data?.account?.contributors?.nodes.filter(sp => sp.totalAmountDonated > 0).map((sponsor, index) => (
                 <div key={index} className={styles.sponsorCard}>
                     <a href={`https://opencollective.com/${sponsor.collectiveSlug}`}>
-                        <img src={sponsor.image} alt={sponsor.name} />
+                        <img src={sponsor.image} alt={sponsor.name}/>
                         <h3>{sponsor.name}{sponsor.isAdmin && ' (admin)'}</h3>
                     </a>
                     <p>{sponsor.publicMessage}</p>
@@ -34,6 +34,20 @@ export default function Sponsors() {
                 </div>
             ))}
         </div>
+    ) : <LoadingIcon size={100}/>
+}
+
+function LoadingIcon({ size }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-loader-2" width="44" height="44"
+             viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round"
+             stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M12 3a9 9 0 1 0 9 9">
+                <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12"
+                                  dur="0.5s" repeatCount="indefinite"/>
+            </path>
+        </svg>
     )
 }