From 10d13f23f6a60670f7d08d15bad18da1a3ae9c5a Mon Sep 17 00:00:00 2001 From: Anurag Pandey Date: Wed, 12 Jun 2024 16:43:48 +0530 Subject: [PATCH] Added skeliton loading animation to contributors page --- assets/contributors/contributor.html | 117 ++++++++++++++++- assets/contributors/contributor.js | 188 ++++++++++++++------------- assets/contributors/loading.css | 34 +++++ 3 files changed, 247 insertions(+), 92 deletions(-) create mode 100644 assets/contributors/loading.css diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html index 655a0ccb1..8bd25d4db 100644 --- a/assets/contributors/contributor.html +++ b/assets/contributors/contributor.html @@ -8,6 +8,7 @@ + @@ -61,7 +62,121 @@

Faces of Dedication: Our Contributing Heroes

-
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
diff --git a/assets/contributors/contributor.js b/assets/contributors/contributor.js index 1c4ce55ba..9f732a57d 100644 --- a/assets/contributors/contributor.js +++ b/assets/contributors/contributor.js @@ -2,17 +2,17 @@ const hamBurger = document.querySelector(".hamburger"); const nMenu = document.querySelector(".nav-menu"); document.addEventListener("DOMContentLoaded", function () { - setTimeout(function () { - document.querySelector("body").classList.add("loaded"); - }, 500); + setTimeout(function () { + document.querySelector("body").classList.add("loaded"); + }, 500); }); // Hamburger menu hamBurger.addEventListener("click", mobileMenu); function mobileMenu() { - hamBurger.classList.toggle("active"); - nMenu.classList.toggle("active"); + hamBurger.classList.toggle("active"); + nMenu.classList.toggle("active"); } const cont = document.getElementById("contributor"); @@ -20,106 +20,112 @@ const owner = "Rakesh9100"; const repoName = "CalcDiverse"; async function fetchContributors(pageNumber) { - const apiUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; - - async function getkey() { - try { - const response = await fetch(apiUrl); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - return data.apik[0].apikey; - } catch (error) { - console.error("Error fetching data:", error); - } - } - const token = await getkey(); - const perPage = 100; - const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; - - const response = await fetch(url, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - if (!response.ok) { - throw new Error( - `Failed to fetch contributors data. Status code: ${response.status}` - ); - } + const apiUrl = + "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; - const contributorsData = await response.json(); - return contributorsData; + async function getkey() { + try { + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + return data.apik[0].apikey; + } catch (error) { + console.error("Error fetching data:", error); + } + } + const token = await getkey(); + const perPage = 100; + const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; + + const response = await fetch(url, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (!response.ok) { + throw new Error( + `Failed to fetch contributors data. Status code: ${response.status}` + ); + } + + const contributorsData = await response.json(); + + return contributorsData; } // Function to fetch all contributors async function fetchAllContributors() { - let allContributors = []; - let pageNumber = 1; - - try { - while (true) { - const contributorsData = await fetchContributors(pageNumber); - if (contributorsData.length === 0) { - break; - } - allContributors = allContributors.concat(contributorsData); - pageNumber++; - } - allContributors.forEach((contributor) => { - if (contributor.login === owner) { - return; - } - - const contributorCard = document.createElement("div"); - contributorCard.classList.add("contributor-card"); - - const avatarImg = document.createElement("img"); - avatarImg.src = contributor.avatar_url; - avatarImg.alt = `${contributor.login}'s Picture`; - - const loginLink = document.createElement("a"); - loginLink.href = contributor.html_url; - loginLink.target = "_blank"; - loginLink.appendChild(avatarImg); - - contributorCard.appendChild(loginLink); - - cont.appendChild(contributorCard); - }); - } catch (error) { - console.error(error); + // const loading = document.getElementById("grid"); + // if (loading) loading.remove(loading.firstChild); + let allContributors = []; + let pageNumber = 1; + + try { + while (true) { + const contributorsData = await fetchContributors(pageNumber); + if (contributorsData.length === 0) { + break; + } + allContributors = allContributors.concat(contributorsData); + pageNumber++; } + allContributors.forEach((contributor) => { + const loading = document.getElementById("grid"); + if (loading) loading.remove(loading.firstChild); + if (contributor.login === owner) { + return; + } + + const contributorCard = document.createElement("div"); + contributorCard.classList.add("contributor-card"); + + const avatarImg = document.createElement("img"); + avatarImg.src = contributor.avatar_url; + avatarImg.alt = `${contributor.login}'s Picture`; + + const loginLink = document.createElement("a"); + loginLink.href = contributor.html_url; + loginLink.target = "_blank"; + loginLink.appendChild(avatarImg); + + contributorCard.appendChild(loginLink); + + cont.appendChild(contributorCard); + }); + } catch (error) { + console.error(error); + } } fetchAllContributors(); let calcScrollValue = () => { - let scrollProg = document.getElementById("progress"); - let pos = document.documentElement.scrollTop; - let calcHeight = - document.documentElement.scrollHeight - - document.documentElement.clientHeight; - let scrollValue = Math.round((pos * 100) / calcHeight); - if (pos > 100) { - scrollProg.style.display = "grid"; - } else { - scrollProg.style.display = "none"; - } - scrollProg.addEventListener("click", () => { - document.documentElement.scrollTop = 0; - }); - scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; + let scrollProg = document.getElementById("progress"); + let pos = document.documentElement.scrollTop; + let calcHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + let scrollValue = Math.round((pos * 100) / calcHeight); + if (pos > 100) { + scrollProg.style.display = "grid"; + } else { + scrollProg.style.display = "none"; + } + scrollProg.addEventListener("click", () => { + document.documentElement.scrollTop = 0; + }); + scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; }; window.addEventListener("scroll", function () { - var scrollToTopButton = document.getElementById("progress"); - if (window.pageYOffset > 200) { - scrollToTopButton.style.display = "block"; - } else { - scrollToTopButton.style.display = "none"; - } + var scrollToTopButton = document.getElementById("progress"); + if (window.pageYOffset > 200) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } }); window.onscroll = calcScrollValue; diff --git a/assets/contributors/loading.css b/assets/contributors/loading.css new file mode 100644 index 000000000..abdb61a54 --- /dev/null +++ b/assets/contributors/loading.css @@ -0,0 +1,34 @@ + + #grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 10px; + width: 90%; + /* max-width: 1200px; */ + } + .placeholder { + width: 95px; + height: 95px; + background-color: #ccc; + border-radius: 50%; + position: relative; + overflow: hidden; + } + .placeholder::after { + content: ''; + position: absolute; + top: 0; + left: -150%; + width: 200%; + height: 100%; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); + animation: loading 0.7s infinite; + } +@keyframes loading { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +}