codex-storage/codex-marketplace-ui
1
0
Fork 0
mirror of https://github.com/codex-storage/codex-marketplace-ui.git synced 2025-02-22 12:48:32 +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 { usePersistence } from "../../hooks/usePersistence";
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 "./HealthChecks.css";
import { CodexSdk } from "../../sdk/codex";
@ -165,7 +165,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li>
<li>
<span>
{portForwarding.enabled ? (
{portForwarding.isFetching ? (
<Spinner></Spinner>
) : portForwarding.enabled ? (
<SuccessCircleIcon></SuccessCircleIcon>
) : (
<ErrorCircleIcon width={16} />
@ -175,7 +177,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li>
<li>
<span>
{codex.isSuccess ? (
{codex.isFetching ? (
<Spinner></Spinner>
) : codex.isSuccess ? (
<SuccessCircleIcon></SuccessCircleIcon>
) : (
<ErrorCircleIcon width={16} />
@ -185,7 +189,9 @@ export function HealthChecks({ online, onStepValid }: Props) {
</li>
<li>
<span>
{persistence.enabled ? (
{persistence.isFetching ? (
<Spinner></Spinner>
) : persistence.enabled ? (
<SuccessCircleIcon></SuccessCircleIcon>
) : (
<WarningIcon />

4
src/hooks/useDebug.ts
View File

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