opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-27 18:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update message loader

Browse Source
This commit is contained in:
steven
2023-03-27 16:21:38 +08:00
parent b79e702b5f
commit ad56250e52
5 changed files with 339 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/MessageLoader.tsx
View File

@ -1,25 +1,15 @@
import { useEffect, useState } from "react";
import { ThreeDots } from "react-loader-spinner";
import Icon from "./Icon";
const MessageLoader = () => {
const [loader, setLoader] = useState<string>(".");
useEffect(() => {
setTimeout(() => {
if (loader.length === 3) {
setLoader(".");
} else {
setLoader(loader + ".");
}
}, 300);
}, [loader]);
return (
<div className={`w-full max-w-full flex flex-row justify-start items-start my-4 pr-8 sm:pr-24`}>
<div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
<Icon.AiOutlineRobot className="w-6 h-6" />
</div>
<div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow">{loader}</div>
<div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow">
<ThreeDots wrapperClass="opacity-80" width="24" height="24" color="" />
</div>
</div>
);
};