chore: constant animation

sinpapeles · Feb 21, 2024 · 960bd16 · 960bd16
1 parent a9d6b92
commit 960bd16
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -32,6 +32,7 @@ function App() {
   useDebounce(() => setName(value), 350, [value]);
 
   const loadData = async () => {
+    if (!name) return;
     setLoading(true);
     const { data } = await refetch();
     setAddr(data?.addr || '');
@@ -40,7 +41,7 @@ function App() {
   };
 
   useEffect(() => {
-    if (name) loadData();
+    loadData();
   }, [name, token]);
 
   return (
@@ -58,12 +59,20 @@ function App() {
                 onChange={({ currentTarget }) => {
                   setValue(currentTarget.value);
                   setAddr('');
+                  setName('');
                 }}
               />
               <Token value={token} onChange={setToken} />
             </div>
-            <Status {...{ name, loading, setValue, addr }} />
-            {(loading || addr) && <ResultBox addr={addr} />}
+            <Status
+              {...{
+                name,
+                loading,
+                setValue,
+                addr,
+              }}
+            />
+            <ResultBox addr={addr} />
           </div>
         </div>
         <span className="mt-2 text-sm text-center text-gray-200 transition duration-200 ">

diff --git a/src/ResultBox.tsx b/src/ResultBox.tsx
@@ -6,12 +6,21 @@ export interface ResultBoxProps {
 }
 export const ResultBox = ({ addr }: ResultBoxProps) => (
   <>
-    {addr ? <Address value={addr} /> : <Skeleton height={35} count={2} />}
+    {addr ? (
+      <Address value={addr} />
+    ) : (
+      <div className="mt-2">
+        <Skeleton height={30} count={2} />
+        <Skeleton height={20} width={100} />
+      </div>
+    )}
     <div className="flex justify-center py-5">
       {addr ? (
         <img
           src={`https://api.qrserver.com/v1/create-qr-code/?data=${addr}&size=220x220&margin=0`}
           alt={`Address: ${addr}`}
+          width={220}
+          height={220}
         />
       ) : (
         <Skeleton height={220} width={220} count={1} />