mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
857 B
TypeScript
33 lines
857 B
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { LoadingSpinner } from './LoadingSpinner';
|
|
|
|
export interface LoadingProps {
|
|
spinning: boolean;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
children?: React.ReactNode;
|
|
}
|
|
export const Loading: React.FC<LoadingProps> = React.memo((props) => {
|
|
const { spinning = false, className, style } = props;
|
|
|
|
return (
|
|
<div className={clsx('relative', className)} style={style}>
|
|
<div
|
|
className={clsx(
|
|
'absolute inset-0 z-10 bg-white bg-opacity-20 flex justify-center items-center transition-opacity duration-100',
|
|
{
|
|
'opacity-0 pointer-events-none': !spinning,
|
|
'opacity-100': spinning,
|
|
}
|
|
)}
|
|
>
|
|
<LoadingSpinner />
|
|
</div>
|
|
|
|
{props.children}
|
|
</div>
|
|
);
|
|
});
|
|
Loading.displayName = 'Loading';
|