LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard-v2): setup loading indicators for main screen panels

This commit is contained in:
Michał Leszczyk 2022-03-04 13:53:56 +01:00
parent 5fec31a3a5
commit 623a4b816b
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
View File

@ -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) {

5
packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
View File

@ -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>

3
packages/dashboard-v2/src/layouts/DashboardLayout.js
View File

@ -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}</>}