Unify & fix XRPLoader component in dev tools

This commit is contained in:
mDuo13
2025-01-15 03:49:44 -08:00
parent 7fe1375286
commit 74eb5c87c7
3 changed files with 10 additions and 17 deletions

View File

@@ -2,12 +2,15 @@ import * as React from 'react';
export interface XRPLoaderProps {
message?: string
show: boolean
}
export default function XRPLoader(props: XRPLoaderProps) {
const classnames = props.show ? "loader" : "loader collapse"
return (
<div className="loader">
<img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
{props.message}
</div>);
<div className={classnames}>
<img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
{props.message}
</div>
)
}

View File

@@ -1,10 +0,0 @@
import * as React from 'react';
import { useThemeHooks } from '@redocly/theme/core/hooks';
export const Loader = () => {
const { useTranslate } = useThemeHooks();
const { translate } = useTranslate();
return <img className="throbber" src="/img/xrp-loader-96.png" alt={translate("(loading)")} />
}

View File

@@ -22,7 +22,7 @@ import { CommandGroup, CommandMethod } from './components/websocket-api/types';
import commandList from "./components/websocket-api/data/command-list.json";
import connections from "./components/websocket-api/data/connections.json";
import { Loader } from './components/Loader';
import XRPLoader from '../../@theme/components/XRPLoader';
export const frontmatter = {
seo: {
@@ -245,7 +245,7 @@ export function WebsocketApiTool() {
{sendLoading && (
<div className="input-group loader send-loader">
<span className="input-group-append">
<Loader />
<XRPLoader show={true} />
</span>
</div>
)}
@@ -274,7 +274,7 @@ export function WebsocketApiTool() {
{wsLoading && (
<div className="input-group loader connect-loader">
<span className="input-group-append">
<Loader />
<XRPLoader show={true} />
</span>
</div>
)}