From 1728e2a870d2d19a27d12de2a273ec8d7526c501 Mon Sep 17 00:00:00 2001
From: GameDog9988 <alex@grattan.me>
Date: Mon, 18 Sep 2023 22:55:02 -0400
Subject: [PATCH 1/2] feat: add skeleton image

---
 .../src/components/game/image-choice.tsx      | 24 ++++++++++-
 apps/client/src/components/game/prompt.tsx    | 43 +++++++++++--------
 apps/client/tailwind.config.js                |  5 +++
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/components/game/image-choice.tsx b/apps/client/src/components/game/image-choice.tsx
index 9aff5575..af209682 100644
--- a/apps/client/src/components/game/image-choice.tsx
+++ b/apps/client/src/components/game/image-choice.tsx
@@ -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,
@@ -38,6 +53,10 @@ const ImageChoiceOption = ({
   bothShown: boolean;
   selectedImage: ImageOption | undefined;
 }) => {
+  if (!image.src) {
+    return <SkeletonImage />;
+  }
+
   return (
     <motion.div
       initial={false}
@@ -73,6 +92,7 @@ const ImageChoice = ({
   imageOption2,
   selectedImage,
   setSelectedImage,
+  loading,
   disabled,
 }: ImageChoiceProps) => {
   const [showImage1, setShowImage1] = useState(false);
@@ -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}
@@ -128,7 +148,7 @@ const ImageChoice = ({
           selectedImage={selectedImage}
         />
       )}
-      {imageOption2.src && (
+      {(loading || imageOption2.src) && (
         <ImageChoiceOption
           image={imageOption2}
           option={2}
diff --git a/apps/client/src/components/game/prompt.tsx b/apps/client/src/components/game/prompt.tsx
index 1e256a6e..72dde775 100644
--- a/apps/client/src/components/game/prompt.tsx
+++ b/apps/client/src/components/game/prompt.tsx
@@ -222,6 +222,7 @@ const Prompt = ({
         }}
         selectedImage={selectedImage}
         setSelectedImage={setSelectedImage}
+        loading={loading}
       />
       <AnimatePresence>
         {!imagesLoaded && (
@@ -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}>
diff --git a/apps/client/tailwind.config.js b/apps/client/tailwind.config.js
index 46caac4b..9a881c20 100644
--- a/apps/client/tailwind.config.js
+++ b/apps/client/tailwind.config.js
@@ -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%" },

From 10ec538822ee00830579ae34967f7d550a04a6d7 Mon Sep 17 00:00:00 2001
From: GameDog9988 <alex@grattan.me>
Date: Mon, 18 Sep 2023 23:06:32 -0400
Subject: [PATCH 2/2] feat: show image prompt while images are loading

---
 apps/client/src/components/game/prompt.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/game/prompt.tsx b/apps/client/src/components/game/prompt.tsx
index 72dde775..92d99e10 100644
--- a/apps/client/src/components/game/prompt.tsx
+++ b/apps/client/src/components/game/prompt.tsx
@@ -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");
 
@@ -116,8 +118,6 @@ const Prompt = ({
     console.timeEnd("Execution Time");
 
     if (images && images.length === 2) {
-      setImagePrompt(formPrompt);
-
       if (userId) {
         const generations = await createGenerations({
           userId,