2023-06-17 08:50:56 +02:00
|
|
|
import { isMobile } from "react-device-detect";
|
2023-06-04 04:28:07 +02:00
|
|
|
import * as Skeleton from "react-loading-skeleton";
|
|
|
|
import "react-loading-skeleton/dist/skeleton.css";
|
|
|
|
|
|
|
|
export default function LoadingChat() {
|
2023-10-23 22:10:34 +02:00
|
|
|
const highlightColor = "#3D4147";
|
|
|
|
const baseColor = "#2C2F35";
|
2023-06-04 04:28:07 +02:00
|
|
|
return (
|
|
|
|
<div
|
2023-06-17 08:50:56 +02:00
|
|
|
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
|
2023-11-27 22:09:55 +01:00
|
|
|
className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll"
|
2023-06-04 04:28:07 +02:00
|
|
|
>
|
|
|
|
<Skeleton.default
|
|
|
|
height="100px"
|
|
|
|
width="100%"
|
2023-10-23 22:10:34 +02:00
|
|
|
highlightColor={highlightColor}
|
|
|
|
baseColor={baseColor}
|
2023-06-04 04:28:07 +02:00
|
|
|
count={1}
|
2023-06-17 08:50:56 +02:00
|
|
|
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
2023-06-04 04:28:07 +02:00
|
|
|
containerClassName="flex justify-start"
|
|
|
|
/>
|
|
|
|
<Skeleton.default
|
|
|
|
height="100px"
|
2023-06-17 08:50:56 +02:00
|
|
|
width={isMobile ? "70%" : "45%"}
|
2023-10-23 22:10:34 +02:00
|
|
|
baseColor={baseColor}
|
|
|
|
highlightColor={highlightColor}
|
2023-06-04 04:28:07 +02:00
|
|
|
count={1}
|
2023-06-17 08:50:56 +02:00
|
|
|
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
2023-06-04 04:28:07 +02:00
|
|
|
containerClassName="flex justify-end"
|
|
|
|
/>
|
|
|
|
<Skeleton.default
|
|
|
|
height="100px"
|
2023-06-17 08:50:56 +02:00
|
|
|
width={isMobile ? "55%" : "30%"}
|
2023-10-23 22:10:34 +02:00
|
|
|
baseColor={baseColor}
|
|
|
|
highlightColor={highlightColor}
|
2023-06-04 04:28:07 +02:00
|
|
|
count={1}
|
2023-06-17 08:50:56 +02:00
|
|
|
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
2023-06-04 04:28:07 +02:00
|
|
|
containerClassName="flex justify-start"
|
|
|
|
/>
|
|
|
|
<Skeleton.default
|
|
|
|
height="100px"
|
2023-06-17 08:50:56 +02:00
|
|
|
width={isMobile ? "88%" : "25%"}
|
2023-10-23 22:10:34 +02:00
|
|
|
baseColor={baseColor}
|
|
|
|
highlightColor={highlightColor}
|
2023-06-04 04:28:07 +02:00
|
|
|
count={1}
|
2023-06-17 08:50:56 +02:00
|
|
|
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
2023-06-04 04:28:07 +02:00
|
|
|
containerClassName="flex justify-end"
|
|
|
|
/>
|
|
|
|
<Skeleton.default
|
|
|
|
height="160px"
|
|
|
|
width="100%"
|
2023-10-23 22:10:34 +02:00
|
|
|
baseColor={baseColor}
|
|
|
|
highlightColor={highlightColor}
|
2023-06-04 04:28:07 +02:00
|
|
|
count={1}
|
2023-06-17 08:50:56 +02:00
|
|
|
className="max-w-full md:max-w-[75%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
2023-06-04 04:28:07 +02:00
|
|
|
containerClassName="flex justify-start"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|