Revert "Add loading Animation to Most used Language card (anuraghazra…

…#2197)" (anuraghazra#2396) This reverts commit 77dcdab.
J00MZ · Mar 1, 2023 · 65d4847 · 65d4847
1 parent f1e06fd
commit 65d4847
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 85 deletions.
diff --git a/readme.md b/readme.md
@@ -80,22 +80,46 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
 
 # Features
 
--   [GitHub Stats Card](#github-stats-card)
--   [GitHub Extra Pins](#github-extra-pins)
--   [Top Languages Card](#top-languages-card)
--   [Wakatime Week Stats](#wakatime-week-stats)
--   [Themes](#themes)
-    -   [Responsive Card Theme](#responsive-card-theme)
--   [Customization](#customization)
-    -   [Common Options](#common-options)
-    -   [Stats Card Exclusive Options](#stats-card-exclusive-options)
-    -   [Repo Card Exclusive Options](#repo-card-exclusive-options)
-    -   [Language Card Exclusive Options](#language-card-exclusive-options)
-    -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
--   [Deploy Yourself](#deploy-on-your-own)
-    -   [On Vercel](#on-vercel)
-    -   [On other platforms](#on-other-platforms)
-    -   [Keep your fork up to date](#keep-your-fork-up-to-date)
+- [Features](#features)
+- [GitHub Stats Card](#github-stats-card)
+    - [Hiding individual stats](#hiding-individual-stats)
+    - [Adding private contributions count to total commits count](#adding-private-contributions-count-to-total-commits-count)
+    - [Showing icons](#showing-icons)
+    - [Themes](#themes)
+      - [All inbuilt themes](#all-inbuilt-themes)
+      - [Responsive Card Theme](#responsive-card-theme)
+        - [Use the transparent theme](#use-the-transparent-theme)
+        - [Add transparent alpha channel to a themes bg\_color](#add-transparent-alpha-channel-to-a-themes-bg_color)
+        - [Use GitHub's theme context tag](#use-githubs-theme-context-tag)
+        - [Use GitHub's new media feature](#use-githubs-new-media-feature)
+    - [Customization](#customization)
+      - [Common Options](#common-options)
+        - [Gradient in bg\_color](#gradient-in-bg_color)
+      - [Stats Card Exclusive Options](#stats-card-exclusive-options)
+      - [Repo Card Exclusive Options](#repo-card-exclusive-options)
+      - [Language Card Exclusive Options](#language-card-exclusive-options)
+      - [Wakatime Card Exclusive Options](#wakatime-card-exclusive-options)
+- [GitHub Extra Pins](#github-extra-pins)
+    - [Usage](#usage)
+    - [Demo](#demo)
+- [Top Languages Card](#top-languages-card)
+    - [Usage](#usage-1)
+    - [Exclude individual repositories](#exclude-individual-repositories)
+    - [Hide individual languages](#hide-individual-languages)
+    - [Show more languages](#show-more-languages)
+    - [Compact Language Card Layout](#compact-language-card-layout)
+    - [Hide Progress Bars](#hide-progress-bars)
+    - [Demo](#demo-1)
+- [Wakatime Week Stats](#wakatime-week-stats)
+    - [Demo](#demo-2)
+    - [All Demos](#all-demos)
+    - [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards)
+  - [Deploy on your own](#deploy-on-your-own)
+    - [On Vercel](#on-vercel)
+      - [:film\_projector: Check Out Step By Step Video Tutorial By @codeSTACKr](#film_projector-check-out-step-by-step-video-tutorial-by-codestackr)
+    - [On other platforms](#on-other-platforms)
+    - [Keep your fork up to date](#keep-your-fork-up-to-date)
+  - [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project)
 
 # GitHub Stats Card
 

diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
@@ -39,41 +39,36 @@ const getLongestLang = (arr) =>
  * Creates a node to display usage of a programming language in percentage
  * using text and a horizontal progress bar.
  *
- * @param {object} props Function properties.
+ * @param {object[]} props Function properties.
  * @param {number} props.width The card width
  * @param {string} props.name Name of the programming language.
  * @param {string} props.color Color of the programming language.
  * @param {string} props.progress Usage of the programming language in percentage.
- * @param {number} props.index Index of the programming language.
  * @returns {string} Programming language SVG node.
  */
-const createProgressTextNode = ({ width, color, name, progress, index }) => {
-  const staggerDelay = (index + 3) * 150;
+const createProgressTextNode = ({ width, color, name, progress }) => {
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
   const progressWidth = width - paddingRight;
 
   return `
-    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
-      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-      <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
-      ${createProgressNode({
-        x: 0,
-        y: 25,
-        color,
-        width: progressWidth,
-        progress,
-        progressBarBackgroundColor: "#ddd",
-        delay: staggerDelay + 300,
-      })}
-    </g>
+    <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
+    <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
+    ${createProgressNode({
+      x: 0,
+      y: 25,
+      color,
+      width: progressWidth,
+      progress,
+      progressBarBackgroundColor: "#ddd",
+    })}
   `;
 };
 
 /**
  * Creates a text only node to display usage of a programming language in percentage.
  *
- * @param {object} props Function properties.
+ * @param {object[]} props Function properties.
  * @param {Lang} props.lang Programming language object.
  * @param {number} props.totalSize Total size of all languages.
  * @param {boolean} props.hideProgress Whether to hide percentage.
@@ -82,11 +77,10 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
  */
 const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
   const percentage = ((lang.size / totalSize) * 100).toFixed(2);
-  const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
   return `
-    <g class="stagger" style="animation-delay: ${staggerDelay}ms">
+    <g>
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
         ${lang.name} ${hideProgress ? "" : percentage + "%"}
@@ -143,13 +137,12 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
  */
 const renderNormalLayout = (langs, width, totalLanguageSize) => {
   return flexLayout({
-    items: langs.map((lang, index) => {
+    items: langs.map((lang) => {
       return createProgressTextNode({
-        width,
+        width: width,
         name: lang.name,
         color: lang.color || DEFAULT_LANG_COLOR,
         progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
-        index,
       });
     }),
     gap: 40,
@@ -294,7 +287,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
     langs_count = DEFAULT_LANGS_COUNT,
     border_radius,
     border_color,
-    disable_animations,
   } = options;
 
   const i18n = new I18n({
@@ -348,43 +340,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
     colors,
   });
 
-  if (disable_animations) card.disableAnimations();
-
+  card.disableAnimations();
   card.setHideBorder(hide_border);
   card.setHideTitle(hide_title);
   card.setCSS(
-    `
-    @keyframes slideInAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: calc(100%-100px);
-      }
-    }
-    @keyframes growWidthAnimation {
-      from {
-        width: 0;
-      }
-      to {
-        width: 100%;
-      }
-    }
-    .lang-name {
-      font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
-      fill: ${colors.textColor};
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    #rect-mask rect{
-      animation: slideInAnimation 1s ease-in-out forwards;
-    }
-    .lang-progress{
-      animation: growWidthAnimation 0.6s ease-in-out forwards;
-    }
-    `,
+    `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`,
   );
 
   return card.render(`

diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js
@@ -10,7 +10,6 @@ import { clampValue } from "./utils.js";
  * @param {string} createProgressNodeParams.color Progress color.
  * @param {string} createProgressNodeParams.progress Progress value.
  * @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color.
- * @param {number} createProgressNodeParams.delay Delay before animation starts.
  * @returns {string} Progress node.
  */
 const createProgressNode = ({
@@ -20,22 +19,20 @@ const createProgressNode = ({
   color,
   progress,
   progressBarBackgroundColor,
-  delay,
 }) => {
   const progressPercentage = clampValue(progress, 2, 100);
 
   return `
     <svg width="${width}" x="${x}" y="${y}">
       <rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
-      <svg data-testid="lang-progress" width="${progressPercentage}%">
-        <rect
-            height="8"
-            fill="${color}"
-            rx="5" ry="5" x="0" y="0"
-            class="lang-progress"
-            style="animation-delay: ${delay}ms;"
-        />
-      </svg>
+      <rect
+          height="8"
+          fill="${color}"
+          rx="5" ry="5" x="0" y="0"
+          data-testid="lang-progress"
+          width="${progressPercentage}%"
+      >
+      </rect>
     </svg>
   `;
 };