v0.3.4

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

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}

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,
@@ -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}>

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%" },

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "main": "index.js",
   "license": "MIT",
   "scripts": {