File size: 2,173 Bytes
f8b5d42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
export default function LoadingChat() {
const highlightColor = "var(--theme-bg-primary)";
const baseColor = "var(--theme-bg-secondary)";
return (
<div
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll p-4"
style={{ height: "calc(100% - 32px)" }}
>
<Skeleton.default
height="100px"
width="100%"
highlightColor={highlightColor}
baseColor={baseColor}
count={1}
className="max-w-full md:max-w-[80%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
<Skeleton.default
height="100px"
width={isMobile ? "70%" : "45%"}
baseColor={baseColor}
highlightColor={highlightColor}
count={1}
className="max-w-full md:max-w-[80%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-end"
/>
<Skeleton.default
height="100px"
width={isMobile ? "55%" : "30%"}
baseColor={baseColor}
highlightColor={highlightColor}
count={1}
className="max-w-full md:max-w-[80%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
<Skeleton.default
height="100px"
width={isMobile ? "88%" : "25%"}
baseColor={baseColor}
highlightColor={highlightColor}
count={1}
className="max-w-full md:max-w-[80%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-end"
/>
<Skeleton.default
height="160px"
width="100%"
baseColor={baseColor}
highlightColor={highlightColor}
count={1}
className="max-w-full md:max-w-[80%] p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex justify-start"
/>
</div>
);
}
|