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 { useUser } from "../../contexts/user";
import useActivePlan from "../../hooks/useActivePlan"; import useActivePlan from "../../hooks/useActivePlan";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import LatestPayment from "./LatestPayment"; import LatestPayment from "./LatestPayment";
import SuggestedPlan from "./SuggestedPlan"; import SuggestedPlan from "./SuggestedPlan";
@ -14,10 +15,7 @@ const CurrentPlan = () => {
const { plans, activePlan, error: plansError } = useActivePlan(user); const { plans, activePlan, error: plansError } = useActivePlan(user);
if (!user || !activePlan) { if (!user || !activePlan) {
return ( return <ContainerLoadingIndicator />;
// TODO: a nicer loading indicator
<div className="flex flex-col space-y-4 h-full justify-center items-center">Loading...</div>
);
} }
if (userError || plansError) { 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 useSWR from "swr";
import { Table, TableBody, TableCell, TableRow } from "../Table"; import { Table, TableBody, TableCell, TableRow } from "../Table";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import useFormattedActivityData from "./useFormattedActivityData"; import useFormattedActivityData from "./useFormattedActivityData";
@ -12,8 +13,8 @@ export default function ActivityTable({ type }) {
if (!items.length) { if (!items.length) {
return ( return (
<div className="flex w-full h-full justify-center items-center text-palette-400"> <div className="flex w-full h-full justify-center items-center text-palette-400">
{/* TODO: proper loading indicator / error message */} {/* TODO: proper error message */}
{!data && !error && <p>Loading...</p>} {!data && !error && <ContainerLoadingIndicator />}
{!data && error && <p>An error occurred while loading this data.</p>} {!data && error && <p>An error occurred while loading this data.</p>}
{data && <p>No files found.</p>} {data && <p>No files found.</p>}
</div> </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 { NavBar } from "../components/Navbar";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user"; import { UserProvider, useUser } from "../contexts/user";
import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
const Wrapper = styled.div.attrs({ const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden", className: "min-h-screen overflow-hidden",
@ -25,7 +26,7 @@ const Layout = ({ children }) => {
<Wrapper> <Wrapper>
{!user && ( {!user && (
<div className="fixed inset-0 flex justify-center items-center bg-palette-100/50"> <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> </div>
)} )}
{user && <>{children}</>} {user && <>{children}</>}