add simple loading icon

This commit is contained in:
2024-04-18 21:02:21 +02:00
parent aebc4fd49c
commit aba602380d
2 changed files with 30 additions and 12 deletions

24
.idea/workspace.xml generated
View File

@@ -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 />

View File

@@ -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>
)
}