Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Skeleton Loading Image #87

Merged
merged 2 commits into from
Sep 19, 2023
Merged

Feat: Skeleton Loading Image #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1728e2a
feat: add skeleton image
agrattan0820 Sep 19, 2023
10ec538
feat: show image prompt while images are loading
agrattan0820 Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions apps/client/src/components/game/image-choice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,24 @@ type ImageChoiceProps = {
imageOption2: { src: string; alt: string };
selectedImage: ImageOption | undefined;
setSelectedImage: Dispatch<SetStateAction<ImageOption | undefined>>;
loading?: boolean;
disabled?: boolean;
};

/**
* Skeleton component taken from Delba's fantastic blog post
* https://delba.dev/blog/animated-loading-skeletons-with-tailwind
*/
const SkeletonImage = () => {
return (
<motion.div
initial={{ opacity: 0, y: -15 }}
animate={{ opacity: 1, y: 0 }}
className="relative isolate aspect-square min-h-[324px] w-full min-w-[324px] overflow-hidden rounded-xl bg-slate-800 shadow-xl shadow-black/5 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:border-slate-100/10 before:bg-gradient-to-r before:from-transparent before:via-slate-700 before:to-transparent"
/>
);
};

const ImageChoiceOption = ({
image,
option,
Expand All @@ -38,6 +53,10 @@ const ImageChoiceOption = ({
bothShown: boolean;
selectedImage: ImageOption | undefined;
}) => {
if (!image.src) {
return <SkeletonImage />;
}

return (
<motion.div
initial={false}
Expand Down Expand Up @@ -73,6 +92,7 @@ const ImageChoice = ({
imageOption2,
selectedImage,
setSelectedImage,
loading,
disabled,
}: ImageChoiceProps) => {
const [showImage1, setShowImage1] = useState(false);
Expand Down Expand Up @@ -115,7 +135,7 @@ const ImageChoice = ({

return (
<div className="flex flex-col gap-6 md:flex-row">
{imageOption1.src && (
{(loading || imageOption1.src) && (
<ImageChoiceOption
image={imageOption1}
option={1}
Expand All @@ -128,7 +148,7 @@ const ImageChoice = ({
selectedImage={selectedImage}
/>
)}
{imageOption2.src && (
{(loading || imageOption2.src) && (
<ImageChoiceOption
image={imageOption2}
option={2}
Expand Down
47 changes: 27 additions & 20 deletions apps/client/src/components/game/prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@ const Prompt = ({
const onPromptSubmit = async (e: FormEvent<PromptFormType>) => {
e.preventDefault();
setLoading(true);

const formPrompt = e.currentTarget.elements.prompt.value;
setImagePrompt(formPrompt);

console.time("Execution Time");

Expand All @@ -116,8 +118,6 @@ const Prompt = ({
console.timeEnd("Execution Time");

if (images && images.length === 2) {
setImagePrompt(formPrompt);

if (userId) {
const generations = await createGenerations({
userId,
Expand Down Expand Up @@ -222,6 +222,7 @@ const Prompt = ({
}}
selectedImage={selectedImage}
setSelectedImage={setSelectedImage}
loading={loading}
/>
<AnimatePresence>
{!imagesLoaded && (
Expand All @@ -233,24 +234,30 @@ const Prompt = ({
onSubmit={onPromptSubmit}
>
<div className="relative mb-8">
<textarea
id="prompt"
placeholder="Describe a funny image"
rows={5}
cols={33}
maxLength={400}
name="prompt"
className="peer w-full resize-none rounded-xl border-2 border-gray-300 bg-transparent p-4 placeholder-transparent focus:border-indigo-300 focus:outline-none"
defaultValue={imagePrompt ?? undefined}
required
disabled={loading}
/>
<label
htmlFor="prompt"
className="absolute -top-6 left-2 text-sm text-gray-400 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:left-2 peer-focus:text-sm peer-focus:text-gray-400"
>
Describe a funny image
</label>
{!loading ? (
<>
<textarea
id="prompt"
placeholder="Describe a funny image"
rows={5}
cols={33}
maxLength={400}
name="prompt"
className="peer w-full resize-none rounded-xl border-2 border-gray-300 bg-transparent p-4 placeholder-transparent focus:border-indigo-300 focus:outline-none"
defaultValue={imagePrompt ?? undefined}
required
disabled={loading}
/>
<label
htmlFor="prompt"
className="absolute -top-6 left-2 text-sm text-gray-400 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:left-2 peer-focus:text-sm peer-focus:text-gray-400"
>
Describe a funny image
</label>
</>
) : (
<p className="mt-4">{imagePrompt}</p>
)}
</div>
<div className="flex items-center gap-2">
<Button type="submit" disabled={loading}>
Expand Down
5 changes: 5 additions & 0 deletions apps/client/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ module.exports = {
"0%": { opacity: 0, transform: "translateY(24px)" },
"100%": { opacity: 1, transform: "translateY(0px)" },
},
shimmer: {
"100%": {
transform: "translateX(100%)",
},
},
typing: {
from: { width: 0 },
to: { width: "100%" },
Expand Down
Loading