added hashloaders

4darsh-Dev · Dec 15, 2024 · 393b7a9 · 393b7a9
1 parent 5add95f
commit 393b7a9
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 31 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,6 +25,7 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "react-spinners": "^0.15.0",
     "three": "^0.168.0"
   },
   "devDependencies": {

diff --git a/frontend/src/pages/CreatorsPage.jsx b/frontend/src/pages/CreatorsPage.jsx
@@ -3,6 +3,8 @@ import './CreatorsPage.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import CountUp from 'react-countup'
+import { HashLoader } from 'react-spinners'
+
 const CreatorsPage = () => {
     const [contributors, setContributors] = useState([])
     const [repoStats, setRepoStats] = useState({})
@@ -90,38 +92,45 @@ const CreatorsPage = () => {
     // Render contributors
     const renderContributors = () => {
         return (
-            <div
-                className="contributor-contributors-grid"
-                id="contributorsGrid"
-            >
-                {contributors.map((contributor) => (
+            // adding the preloader
+
+
                     <div
-                        className="contributor-contributor-card"
-                        key={contributor.login}
+                    className="contributor-contributors-grid"
+                    id="contributorsGrid"
                     >
-                        <img
-                            src={contributor.avatar_url}
-                            alt={contributor.login}
-                        />
-                        <h3>{contributor.login}</h3>
-                        <p>{contributor.type}</p>
-                        <div className="contributor-contributions">
-                            {contributor.contributions} contributions
-                        </div>
-                        <div className="contributor-footer">
-                            <a
-                                href={contributor.html_url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                {getIcon('external-link')}
-                                <FontAwesomeIcon icon={faGithub} />
-                            </a>
-                            {getIcon('github')}
+                    {contributors.map((contributor) => (
+                        <div
+                            className="contributor-contributor-card"
+                            key={contributor.login}
+                        >
+                            <img
+                                src={contributor.avatar_url}
+                                alt={contributor.login}
+                            />
+                            <h3>{contributor.login}</h3>
+                            <p>{contributor.type}</p>
+                            <div className="contributor-contributions">
+                                {contributor.contributions} contributions
+                            </div>
+                            <div className="contributor-footer">
+                                <a
+                                    href={contributor.html_url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {getIcon('external-link')}
+                                    <FontAwesomeIcon icon={faGithub} />
+                                </a>
+                                {getIcon('github')}
+                            </div>
                         </div>
+                    ))}
                     </div>
-                ))}
-            </div>
+
+
+
+
         )
     }
 
@@ -138,7 +147,10 @@ const CreatorsPage = () => {
             <section className=" dark:bg-slate-900">
                 <div className="contributor-contributors">
                     {loading ? (
-                        <div id="loading" className="contributor-loading"></div>
+                        // <div id="loading" className="contributor-loading"></div>
+                        <div className="flex justify-center items-center min-h-screen">
+                        <HashLoader color={'#252550'} size={50} loading={loading} />
+                    </div>
                     ) : (
                         <>
                             <h2 className="dark:text-white">

diff --git a/frontend/src/pages/ExplorePage.jsx b/frontend/src/pages/ExplorePage.jsx
@@ -4,6 +4,7 @@ import NFTCard from '../components/NFTCard'
 import { connectWallet } from '../utils/ethereum'
 import { ethers } from 'ethers'
 import { useNavigate } from 'react-router-dom'
+import { HashLoader } from 'react-spinners';
 
 const ExplorePage = () => {
     const [nfts, setNfts] = useState([])
@@ -125,9 +126,13 @@ const ExplorePage = () => {
 
     if (loading) {
         return (
-            <div className="text-center py-10">
-                Loading NFTs... Please wait.
+            // <div className="text-center py-10">
+            //     Loading NFTs... Please wait.
+            // </div>
+            <div className="flex justify-center items-center min-h-screen">
+                <HashLoader color={"#252550"} size={50} loading={loading}  />
             </div>
+
         )
     }