image loading skeleton adden

Author: devvsakib

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --open",
     "build": "vite build",
     "preview": "vite preview"
   },

src/components/Contributors/contributors.jsx

@@ -46,14 +46,14 @@ function Contribute() {
                 id="container"
                 className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 md:px-6 border-l-4 rounded-lg bg-dark-secondary flex flex-col mt-8 items-center mx-auto gap-2 px-3 border-[#${changeColor()}] hover:border-primary hover:text-primary`}
               >
-                <h1>
+                <img className="pfp mb-8 skeleton" src={user.avatar_url} />
+                <h1 className="text-center -mb-10 font-semibold uppercase">
                   {user.login}{" "}
                   <small className="text-violet-400 container:hover:text-white">
                     {user.contributions}
                   </small>
                 </h1>
-                <img className="pfp" src={user.avatar_url} />
-                <div className="links">
+                <div className="links text-sm">
                   <a className="spf-link" href={user.html_url}>
                     Github
                   </a>
@@ -69,10 +69,10 @@ function Contribute() {
               <img
                 src="/assets/run.gif"
                 className="w-1/2 mx-auto"
-                alt="Running Gif"
+                alt="Running.gif"
               />
               <h1 className="text-center md:text-2xl text-white">
-                Contributors coming...
+                Contributors coming❤️‍🔥...
               </h1>
             </div>
           )

src/components/Contributors/css/index.css

@@ -25,4 +25,17 @@
   left: 11%;
   width: 10rem;
   border-radius: 50%;
+}
+
+.skeleton {
+  animation: skeleton 1s linear infinite alternate;
+}
+
+@keyframes skeleton {
+  0% {
+    background-color: rgb(145, 144, 144);
+  }
+  100% {
+    background-color: rgba(116, 116, 116, 0.4);
+  }
 }/*# sourceMappingURL=index.css.map */

src/components/Contributors/css/index.css.map

@@ -1,26 +1,44 @@
-#container{
-  
-  display:inline-block;
+#container {
+
+  display: inline-block;
   width: 17rem;
   height: 18rem;
   margin: 2rem;
-  
+
 }
-.links{
+
+.links {
   position: relative;
   display: inline;
-  top:20%;
+  top: 20%;
 }
-.spf-link{
+
+.spf-link {
   padding: 1.4rem;
 }
-.spf-link:hover{
-  text-decoration:underline;
+
+.spf-link:hover {
+  text-decoration: underline;
 }
-.pfp{
+
+.pfp {
   position: relative;
   top: 5%;
   left: 11%;
-  width:10rem;
+  width: 10rem;
   border-radius: 50%;
+}
+
+.skeleton {
+  animation: skeleton 1s linear infinite alternate;
+}
+
+@keyframes skeleton {
+  0% {
+    background-color: rgb(145, 144, 144);
+  }
+
+  100% {
+    background-color: rgba(116, 116, 116, 0.4);
+  }
 }