wip

hlsitechio · Aug 9, 2024 · b485a4a · b485a4a
1 parent c17fca9
commit b485a4a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,8 @@
 ## Future Tasks
 
 - [ ] Add dynamic OG images to the specific generations & include the prompt
-- [ ] Address issue of publishing the same app repeatedly
+- [ ] Add more dynamic OG images for playwright
+- [ ] Address issue of ability to publish the same app repeatedly
 - [ ] Try chain of thought reasoning to see if it works better overall
 - [ ] Encourage best practices by making the input and textarea & having pills to generate apps w/ good prompts
 - [ ] Save previous versions so people can go back and forth between the generated ones

diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
@@ -35,6 +35,7 @@ export default function Home() {
   let [messages, setMessages] = useState<{ role: string; content: string }[]>(
     [],
   );
+  let [isPublishing, setIsPublishing] = useState(false);
 
   let loading = status === "creating" || status === "updating";
 
@@ -331,35 +332,50 @@ export default function Home() {
                 </fieldset>
               </form>
               <div>
-                <Toaster richColors />
+                <Toaster invert={true} />
                 <Tooltip.Provider>
                   <Tooltip.Root delayDuration={0}>
                     <Tooltip.Trigger asChild>
                       <button
-                        disabled={loading}
+                        disabled={loading || isPublishing}
                         onClick={async () => {
+                          setIsPublishing(true);
                           let userMessages = messages.filter(
                             (message) => message.role === "user",
                           );
                           let prompt =
                             userMessages[userMessages.length - 1].content;
 
-                          const appId = await shareApp({
-                            generatedCode,
-                            prompt,
-                            model: modelUsedForInitialCode,
-                          });
-
+                          const appId = await minDelay(
+                            shareApp({
+                              generatedCode,
+                              prompt,
+                              model: modelUsedForInitialCode,
+                            }),
+                            1000,
+                          );
+                          setIsPublishing(false);
                           toast.success(
                             `Your app has been published & copied to your clipboard! llamacoder.io/share/${appId}`,
                           );
                           navigator.clipboard.writeText(
                             `llamacoder.io/share/${appId}`,
                           );
                         }}
-                        className="inline-flex h-[68px] w-40 items-center justify-center gap-2 rounded-3xl bg-blue-500"
+                        className="inline-flex h-[68px] w-40 items-center justify-center gap-2 rounded-3xl bg-blue-500 transition disabled:grayscale"
                       >
-                        <ArrowUpOnSquareIcon className="size-5 text-xl text-white" />
+                        <span className="relative">
+                          {isPublishing && (
+                            <span className="absolute inset-0 flex items-center justify-center">
+                              <LoadingDots color="white" style="large" />
+                            </span>
+                          )}
+
+                          <ArrowUpOnSquareIcon
+                            className={`${isPublishing ? "invisible" : ""} size-5 text-xl text-white`}
+                          />
+                        </span>
+
                         <p className="text-lg font-medium text-white">
                           Publish app
                         </p>
@@ -445,3 +461,10 @@ export default function Home() {
     </div>
   );
 }
+
+async function minDelay<T>(promise: Promise<T>, ms: number) {
+  let delay = new Promise((resolve) => setTimeout(resolve, ms));
+  let [p] = await Promise.all([promise, delay]);
+
+  return p;
+}