feat: add loading state to highlight cards (#921)

Fixes #903
open-sauced · Mar 1, 2023 · 63c2cc1 · 63c2cc1
1 parent eff13d5
commit 63c2cc1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 41 deletions.
diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx
@@ -9,6 +9,7 @@ import metricArrow from "../../../img/icons/metric-arrow.svg";
 import Link from "next/link";
 import Card from "components/atoms/Card/card";
 import StackedAvatar from "../StackedAvatar/stacked-avatar";
+import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
 
 interface HighlightCardProps {
   className?: string;
@@ -21,7 +22,8 @@ interface HighlightCardProps {
   percentageLabel?: string;
   value?: number | string;
   valueLabel?: string;
-  contributors?: DbContribution[]
+  contributors?: DbContribution[];
+  isLoading?: boolean;
 }
 
 // TO-DO:
@@ -66,7 +68,8 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
   percentageLabel,
   value,
   valueLabel,
-  contributors = []
+  contributors = [],
+  isLoading
 }) => {
   return (
     <Card className={`${className ? className : ""} flex flex-col w-full sm:max-w-[calc(50%-(1rem/2))] h-auto `}>
@@ -108,51 +111,55 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
         </div>
 
         {/* Main Information */}
-        <div className="flex flex-col w-full px-6 pb-5 mt-2">
-          {/* Main Number */}
-          <div className="flex flex-col items-center">
-            {/* Percentage */}
-            <div className="text-4xl">
-              {percentage !== undefined ? `${percentage}%` : <span></span>}{value !== undefined ? value : ""}
-            </div>
+        { isLoading ? (
+          <SkeletonWrapper height={79} count={2} />
+        ) : (
+          <div className="flex flex-col w-full px-6 pb-5 mt-2">
+            {/* Main Number */}
+            <div className="flex flex-col items-center">
+              {/* Percentage */}
+              <div className="text-4xl">
+                {percentage !== undefined ? `${percentage}%` : <span></span>}{value !== undefined ? value : ""}
+              </div>
 
-            {/* Label */}
-            <div className="text-base   text-slate-600 mt-0.5">
-              <span>{percentageLabel ? percentageLabel : ""}{valueLabel ? valueLabel : ""}&nbsp;</span>
+              {/* Label */}
+              <div className="text-base   text-slate-600 mt-0.5">
+                <span>{percentageLabel ? percentageLabel : ""}{valueLabel ? valueLabel : ""}&nbsp;</span>
+              </div>
             </div>
-          </div>
 
-          {/* Contributor Cards */}
-          { contributors && <div className="flex items-center justify-center mt-7 h-1">
-            <StackedAvatar contributors={contributors} visibleQuantity={5} />
-          </div> }
+            {/* Contributor Cards */}
+            { contributors && <div className="flex items-center justify-center mt-7 h-1">
+              <StackedAvatar contributors={contributors} visibleQuantity={5} />
+            </div> }
 
-          {/* Progress Bar */}
-          <div
-            className={`flex items-center w-full rounded-full mt-7 ${
-              percentage && (percentage > 0 || percentage < 99) ? "gap-2" : ""
-            }`}
-          >
+            {/* Progress Bar */}
             <div
-              className={`${
-                metricIncreases
-                  ? percentage && percentage > 70
-                    ? "bg-green-500"
-                    : percentage && percentage > 30
-                      ? "bg-yellow-500"
-                      : "bg-red-500"
-                  : percentage && percentage > 70
-                    ? "bg-red-500"
-                    : percentage && percentage > 30
-                      ? "bg-yellow-500"
-                      : "bg-green-500"
-              } h-3 rounded-full transition-all duration-500 ease-in-out`}
-              style={{ width: (percentage ? percentage : 0) + "%" }}
-            ></div>
+              className={`flex items-center w-full rounded-full mt-7 ${
+                percentage && (percentage > 0 || percentage < 99) ? "gap-2" : ""
+              }`}
+            >
+              <div
+                className={`${
+                  metricIncreases
+                    ? percentage && percentage > 70
+                      ? "bg-green-500"
+                      : percentage && percentage > 30
+                        ? "bg-yellow-500"
+                        : "bg-red-500"
+                    : percentage && percentage > 70
+                      ? "bg-red-500"
+                      : percentage && percentage > 30
+                        ? "bg-yellow-500"
+                        : "bg-green-500"
+                } h-3 rounded-full transition-all duration-500 ease-in-out`}
+                style={{ width: (percentage ? percentage : 0) + "%" }}
+              ></div>
 
-            <div className={`${ percentage !== undefined && "bg-gray-200"} w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out`}></div>
+              <div className={`${ percentage !== undefined && "bg-gray-200"} w-auto flex-auto h-3 rounded-full transition-all duration-500 ease-in-out`}></div>
+            </div>
           </div>
-        </div>
+        )}
       </>
     </Card>
   );

diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx
@@ -22,7 +22,7 @@ interface DashboardProps {
 }
 
 export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
-  const { data: insightsData } = useInsights(repositories);
+  const { data: insightsData, isLoading } = useInsights(repositories);
   const { data: prData, isError: prError } = useTopicPRs(undefined, repositories);
   const { data: contributorData } = useTopicContributions(10, repositories);
   const [showBots, setShowBots] = useState(false);
@@ -101,6 +101,7 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
           numChanged={humanizeNumber(Math.abs(compare1.allContributors - compare2.allContributors), "abbreviation")}
           value={humanizeNumber(compare1.allContributors, "comma")}
           contributors={contributorData}
+          isLoading={isLoading}
         />
         <HighlightCard
           label="Spam"
@@ -110,6 +111,7 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
           numChanged={humanizeNumber(Math.abs(compare1.spamTotal - compare2.spamTotal), "abbreviation")}
           percentage={compare1.spamPercentage}
           percentageLabel={`of ${humanizeNumber(compare1.allPrsTotal, "comma")}`}
+          isLoading={isLoading}
         />
         <HighlightCard
           label="Accepted PRs"
@@ -119,6 +121,7 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
           numChanged={humanizeNumber(Math.abs(compare1.acceptedTotal - compare2.acceptedTotal), "abbreviation")}
           percentage={compare1.acceptedPercentage}
           percentageLabel={`of ${humanizeNumber(compare1.allPrsTotal, "comma")}`}
+          isLoading={isLoading}
         />
         <HighlightCard
           label="Unlabeled PRs"
@@ -128,6 +131,7 @@ export const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
           numChanged={humanizeNumber(Math.abs(compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal), "abbreviation")}
           percentage={compare1.unlabeledPercentage}
           percentageLabel={`of ${humanizeNumber(compare1.allPrsTotal, "comma")}`}
+          isLoading={isLoading}
         />
       </section>
       <section className="flex flex-col lg:flex-row max-w-full gap-4 mb-6">