codex-storage/codex-marketplace-ui
1
0
Fork 0
mirror of https://github.com/codex-storage/codex-marketplace-ui.git synced 2025-02-22 20:58:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add spinner while fetching health checks

Browse Source
This commit is contained in:
Arnaud 2024-11-10 09:46:13 +07:00
parent 33d925e6f0
commit 04f99c1b67
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/HealthChecks/HealthChecks.tsx
View File

@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
import { useDebug } from "../../hooks/useDebug"; import { useDebug } from "../../hooks/useDebug";
import { usePersistence } from "../../hooks/usePersistence"; import { usePersistence } from "../../hooks/usePersistence";
import { usePortForwarding } from "../../hooks/usePortForwarding"; import { usePortForwarding } from "../../hooks/usePortForwarding";
import { Input } from "@codex-storage/marketplace-ui-components"; import { Input, Spinner } from "@codex-storage/marketplace-ui-components";
import { classnames } from "../../utils/classnames"; import { classnames } from "../../utils/classnames";
import "./HealthChecks.css"; import "./HealthChecks.css";
import { CodexSdk } from "../../sdk/codex"; import { CodexSdk } from "../../sdk/codex";
@ -165,7 +165,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li> </li>
<li> <li>
<span> <span>
{portForwarding.enabled ? ( {portForwarding.isFetching ? (
<Spinner></Spinner>
) : portForwarding.enabled ? (
<SuccessCircleIcon></SuccessCircleIcon> <SuccessCircleIcon></SuccessCircleIcon>
) : ( ) : (
<ErrorCircleIcon width={16} /> <ErrorCircleIcon width={16} />
@ -175,7 +177,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li> </li>
<li> <li>
<span> <span>
{codex.isSuccess ? ( {codex.isFetching ? (
<Spinner></Spinner>
) : codex.isSuccess ? (
<SuccessCircleIcon></SuccessCircleIcon> <SuccessCircleIcon></SuccessCircleIcon>
) : ( ) : (
<ErrorCircleIcon width={16} /> <ErrorCircleIcon width={16} />
@ -185,7 +189,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li> </li>
<li> <li>
<span> <span>
{persistence.enabled ? ( {persistence.isFetching ? (
<Spinner></Spinner>
) : persistence.enabled ? (
<SuccessCircleIcon></SuccessCircleIcon> <SuccessCircleIcon></SuccessCircleIcon>
) : ( ) : (
<WarningIcon /> <WarningIcon />

4
src/hooks/useDebug.ts
View File

@ -3,7 +3,7 @@ import { CodexSdk } from "../sdk/codex";
import { Promises } from "../utils/promises"; import { Promises } from "../utils/promises";
export function useDebug(throwOnError: boolean) { export function useDebug(throwOnError: boolean) {
const { data, isError, isPending, refetch, isSuccess } = useQuery({ const { data, isError, isPending, refetch, isSuccess, isFetching } = useQuery({
queryFn: () => queryFn: () =>
CodexSdk.debug() CodexSdk.debug()
.info() .info()
@ -27,5 +27,5 @@ export function useDebug(throwOnError: boolean) {
throwOnError, throwOnError,
}); });
return { data, isPending, isError, isSuccess, refetch }; return { data, isPending, isError, isSuccess, refetch, isFetching };
} }