mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-09-22 12:20:10 +02:00
58 lines
1.8 KiB
React
58 lines
1.8 KiB
React
|
import * as Skeleton from "react-loading-skeleton";
|
||
|
import "react-loading-skeleton/dist/skeleton.css";
|
||
|
|
||
|
export default function LoadingChat() {
|
||
|
return (
|
||
|
<div
|
||
|
style={{ height: "calc(100% - 32px)" }}
|
||
|
className="transition-all duration-500 relative ml-[2px] mr-[8px] my-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[82%] p-[18px] h-full overflow-y-scroll"
|
||
|
>
|
||
|
<Skeleton.default
|
||
|
height="100px"
|
||
|
width="100%"
|
||
|
baseColor={"#2a3a53"}
|
||
|
highlightColor={"#395073"}
|
||
|
count={1}
|
||
|
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||
|
containerClassName="flex justify-start"
|
||
|
/>
|
||
|
<Skeleton.default
|
||
|
height="100px"
|
||
|
width="45%"
|
||
|
baseColor={"#2a3a53"}
|
||
|
highlightColor={"#395073"}
|
||
|
count={1}
|
||
|
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||
|
containerClassName="flex justify-end"
|
||
|
/>
|
||
|
<Skeleton.default
|
||
|
height="100px"
|
||
|
width="30%"
|
||
|
baseColor={"#2a3a53"}
|
||
|
highlightColor={"#395073"}
|
||
|
count={1}
|
||
|
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||
|
containerClassName="flex justify-start"
|
||
|
/>
|
||
|
<Skeleton.default
|
||
|
height="100px"
|
||
|
width="25%"
|
||
|
baseColor={"#2a3a53"}
|
||
|
highlightColor={"#395073"}
|
||
|
count={1}
|
||
|
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||
|
containerClassName="flex justify-end"
|
||
|
/>
|
||
|
<Skeleton.default
|
||
|
height="160px"
|
||
|
width="100%"
|
||
|
baseColor={"#2a3a53"}
|
||
|
highlightColor={"#395073"}
|
||
|
count={1}
|
||
|
className="max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||
|
containerClassName="flex justify-start"
|
||
|
/>
|
||
|
</div>
|
||
|
);
|
||
|
}
|