From ec694279e0fb4cc75862a2300a38c0ef0328d5f2 Mon Sep 17 00:00:00 2001 From: glax Date: Thu, 4 Sep 2025 18:44:46 +0200 Subject: [PATCH] Custom loadanimations for custom components --- .../src/Components/Inputs/TButton.tsx | 4 +- .../src/Components/Inputs/TInput.tsx | 5 +- .../src/Components/Inputs/loadingBorder.css | 56 + tranga-website/src/api/V2.ts | 1411 +++++++++++++++++ tranga-website/src/api/data-contracts.ts | 405 +++++ tranga-website/src/api/http-client.ts | 265 ++++ 6 files changed, 2142 insertions(+), 4 deletions(-) create mode 100644 tranga-website/src/Components/Inputs/loadingBorder.css create mode 100644 tranga-website/src/api/V2.ts create mode 100644 tranga-website/src/api/data-contracts.ts create mode 100644 tranga-website/src/api/http-client.ts diff --git a/tranga-website/src/Components/Inputs/TButton.tsx b/tranga-website/src/Components/Inputs/TButton.tsx index 4b9ba1a..abb66c3 100644 --- a/tranga-website/src/Components/Inputs/TButton.tsx +++ b/tranga-website/src/Components/Inputs/TButton.tsx @@ -1,4 +1,4 @@ -import { Button, CircularProgress } from '@mui/joy' +import { Button } from '@mui/joy' import TProps, { TColor, TDisabled, TState } from './TProps.ts' import { MouseEventHandler, ReactNode, useState } from 'react' @@ -21,7 +21,7 @@ export default function TButton(props: TButtonProps) { disabled={props.disabled ?? TDisabled(state)} aria-disabled={props.disabled ?? TDisabled(state)} onClick={clicked} - startDecorator={TDisabled(state) ? : null} + className={'t-loadable'} > {props.children} diff --git a/tranga-website/src/Components/Inputs/TInput.tsx b/tranga-website/src/Components/Inputs/TInput.tsx index a3197d7..f4f9486 100644 --- a/tranga-website/src/Components/Inputs/TInput.tsx +++ b/tranga-website/src/Components/Inputs/TInput.tsx @@ -1,7 +1,8 @@ -import { Button, CircularProgress, Input } from '@mui/joy' +import { Button, Input } from '@mui/joy' import { MouseEventHandler, useEffect, useState } from 'react' import * as React from 'react' import TProps, { TColor, TDisabled, TState } from './TProps.ts' +import './loadingBorder.css' export default function TInput(props: TInputProps) { const [state, setState] = useState(TState.clean) @@ -63,7 +64,7 @@ export default function TInput(props: TInputProps) { value={value} onChange={inputValueChanged} onKeyDown={keyDownHandler} - startDecorator={TDisabled(state) ? : null} + className={'t-loadable'} endDecorator={ props.submitButtonHidden ? null : (