From 623a4b816ba04dc83fde6a62261d9e262dc02df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Fri, 4 Mar 2022 13:53:56 +0100
Subject: [PATCH] feat(dashboard-v2): setup loading indicators for main screen
 panels

---
 .../dashboard-v2/src/components/CurrentPlan/CurrentPlan.js  | 6 ++----
 .../src/components/LatestActivity/ActivityTable.js          | 5 +++--
 packages/dashboard-v2/src/layouts/DashboardLayout.js        | 3 ++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js b/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
index 86725c93..f8a5cf9e 100644
--- a/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
+++ b/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
@@ -3,6 +3,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 
 import { useUser } from "../../contexts/user";
 import useActivePlan from "../../hooks/useActivePlan";
+import { ContainerLoadingIndicator } from "../LoadingIndicator";
 
 import LatestPayment from "./LatestPayment";
 import SuggestedPlan from "./SuggestedPlan";
@@ -14,10 +15,7 @@ const CurrentPlan = () => {
   const { plans, activePlan, error: plansError } = useActivePlan(user);
 
   if (!user || !activePlan) {
-    return (
-      // TODO: a nicer loading indicator
-      <div className="flex flex-col space-y-4 h-full justify-center items-center">Loading...</div>
-    );
+    return <ContainerLoadingIndicator />;
   }
 
   if (userError || plansError) {
diff --git a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
index 647f9bf8..e8d86a6c 100644
--- a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
@@ -2,6 +2,7 @@ import * as React from "react";
 import useSWR from "swr";
 
 import { Table, TableBody, TableCell, TableRow } from "../Table";
+import { ContainerLoadingIndicator } from "../LoadingIndicator";
 
 import useFormattedActivityData from "./useFormattedActivityData";
 
@@ -12,8 +13,8 @@ export default function ActivityTable({ type }) {
   if (!items.length) {
     return (
       <div className="flex w-full h-full justify-center items-center text-palette-400">
-        {/* TODO: proper loading indicator / error message */}
-        {!data && !error && <p>Loading...</p>}
+        {/* TODO: proper error message */}
+        {!data && !error && <ContainerLoadingIndicator />}
         {!data && error && <p>An error occurred while loading this data.</p>}
         {data && <p>No files found.</p>}
       </div>
diff --git a/packages/dashboard-v2/src/layouts/DashboardLayout.js b/packages/dashboard-v2/src/layouts/DashboardLayout.js
index 07f4eabf..b369ece3 100644
--- a/packages/dashboard-v2/src/layouts/DashboardLayout.js
+++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js
@@ -8,6 +8,7 @@ import { PageContainer } from "../components/PageContainer";
 import { NavBar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
+import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
 
 const Wrapper = styled.div.attrs({
   className: "min-h-screen overflow-hidden",
@@ -25,7 +26,7 @@ const Layout = ({ children }) => {
     <Wrapper>
       {!user && (
         <div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
-          <p>Loading...</p> {/* TODO: Do something nicer here */}
+          <ContainerLoadingIndicator className="!text-palette-200/50" />
         </div>
       )}
       {user && <>{children}</>}