feat: add loading state & formatTime util

fal-ai · Mar 3, 2024 · 89bc7b5 · 89bc7b5
1 parent 26e9062
commit 89bc7b5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -101,8 +101,8 @@ export default function Lightning() {
     setModelOne(null);
     setModelTwo(null);
 
-    upscaleWithModelOne(file);
     upscaleWithModelTwo(file);
+    upscaleWithModelOne(file);
   };
 
   useEffect(() => {
@@ -114,7 +114,7 @@ export default function Lightning() {
   return (
     <main>
       <div className="flex flex-col justify-between h-[calc(100vh-56px)]">
-        <div className="py-4 md:py-10 px-0 space-y-4 lg:space-y-8 mx-auto w-full max-w-5xl">
+        <div className="py-4 md:pb-10 px-0 space-y-4 lg:space-y-8 mx-auto w-full max-w-5xl">
           <div className="container px-3 md:px-0 flex flex-col mt-10">
             <div className="flex flex-row items-center justify-center space-x-3">
               <div className="w-80 flex flex-col justify-center items-center space-y-2">

diff --git a/components/model-compare.tsx b/components/model-compare.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn, formatTime } from "@/lib/utils";
 import Image from "next/image";
 import {
   ReactCompareSlider,
@@ -64,7 +64,7 @@ const ModelCompare = ({
                         }
                       >
                         {modelOne
-                          ? `${(modelOne.inferenceTime * 1000).toFixed(0)}ms`
+                          ? formatTime(modelOne.inferenceTime * 1000)
                           : `n/a`}
                       </span>
                     )}
@@ -86,7 +86,7 @@ const ModelCompare = ({
                         }
                       >
                         {modelTwo
-                          ? `${(modelTwo.inferenceTime * 1000).toFixed(0)}ms`
+                          ? formatTime(modelTwo.inferenceTime * 1000)
                           : `n/a`}
                       </span>
                     )}

diff --git a/components/original-compare.tsx b/components/original-compare.tsx
@@ -1,3 +1,5 @@
+import { formatTime } from "@/lib/utils";
+import { LoaderIcon } from "lucide-react";
 import Image from "next/image";
 import {
   ReactCompareSlider,
@@ -49,18 +51,20 @@ const OriginalCompare = ({
               }
               itemTwo={
                 <>
-                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                  <div className="absolute flex items-center space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
                     <span>CCSR</span>
-                    {modelOne && (
+                    {modelOne ? (
                       <span
                         className={
                           !modelOne ? "text-neutral-500" : "text-green-400"
                         }
                       >
                         {modelOne
-                          ? `${(modelOne.inferenceTime * 1000).toFixed(0)}ms`
+                          ? formatTime(modelOne.inferenceTime * 1000)
                           : `n/a`}
                       </span>
+                    ) : (
+                      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
                     )}
                   </div>
                   <ReactCompareSliderImage
@@ -130,18 +134,20 @@ const OriginalCompare = ({
                     srcSet={modelTwo?.image as string}
                     alt="Image one"
                   />
-                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                  <div className="absolute flex items-center space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
                     <span>SUPIR</span>
-                    {modelTwo && (
+                    {modelTwo ? (
                       <span
                         className={
                           !modelTwo ? "text-neutral-500" : "text-green-400"
                         }
                       >
                         {modelTwo
-                          ? `${(modelTwo.inferenceTime * 1000).toFixed(0)}ms`
+                          ? formatTime(modelTwo.inferenceTime * 1000)
                           : `n/a`}
                       </span>
+                    ) : (
+                      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
                     )}
                   </div>
                 </>

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -4,3 +4,8 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function formatTime(ms: number) {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}