fix: avoid resize during image loading (#349)

packages/app/src/styles/components/welcome-page.css

@@ -98,14 +98,20 @@
     h2 {
       @apply text-white text-2xl mb-4;
     }
-    img {
-      @apply mx-auto mb-5;
-      min-height: 100px;
+
+    .imgContainer {
+      @apply mb-5 flex items-center justify-center;
+      @apply h-[250px];
 
       @media (max-height: 700px) {
+        min-height: 100px;
         max-height: calc(100vh / 3);
       }
     }
+
+    img {
+      @apply mx-auto max-h-full;
+    }
   }
   /*
     StepsIndicator

packages/app/src/systems/Welcome/components/AddFunds.tsx

@@ -1,15 +1,15 @@
 import { useWelcomeSteps } from "../hooks";
 
+import { WelcomeImage } from "./WelcomeImage";
 import { WelcomeStep } from "./WelcomeStep";
 
-import { relativeUrl } from "~/systems/Core";
 import { FaucetApp } from "~/systems/Faucet";
 
 export function AddFunds() {
   const { next } = useWelcomeSteps();
   return (
     <WelcomeStep id={1}>
-      <img src={relativeUrl("/illustrations/add-funds.png")} />
+      <WelcomeImage src="/illustrations/add-funds.png" />
       <h2>Add some test ETH to your wallet</h2>
       <p>
         To get started you&apos;ll need some funds.

packages/app/src/systems/Welcome/components/CreateWallet.tsx

@@ -2,9 +2,10 @@ import { useMutation } from "react-query";
 
 import { useWelcomeSteps } from "../hooks";
 
+import { WelcomeImage } from "./WelcomeImage";
 import { WelcomeStep } from "./WelcomeStep";
 
-import { relativeUrl, useAppContext } from "~/systems/Core";
+import { useAppContext } from "~/systems/Core";
 import { Button } from "~/systems/UI";
 
 export function CreateWallet() {
@@ -23,7 +24,7 @@ export function CreateWallet() {
 
   return (
     <WelcomeStep id={0}>
-      <img src={relativeUrl("/illustrations/create-wallet.png")} />
+      <WelcomeImage src="/illustrations/create-wallet.png" />
       <h2>Welcome to SwaySwap</h2>
       <p className="my-5">
         To get started you&apos;ll need a wallet.

packages/app/src/systems/Welcome/components/WelcomeDone.tsx

@@ -1,8 +1,8 @@
 import { useWelcomeSteps } from "../hooks";
 
+import { WelcomeImage } from "./WelcomeImage";
 import { WelcomeStep } from "./WelcomeStep";
 
-import { relativeUrl } from "~/systems/Core";
 import { Button, Link } from "~/systems/UI";
 
 const DISCLAIMER_URL =
@@ -17,7 +17,7 @@ export function WelcomeDone() {
 
   return (
     <WelcomeStep id={2}>
-      <img src={relativeUrl("/illustrations/done.png")} width="70%" />
+      <WelcomeImage src="/illustrations/done.png" />
       <h2>Wallet Created!</h2>
       <p className="my-5">
         Now you&apos;re ready to swap and pool <b>test assets</b> using Fuel:

packages/app/src/systems/Welcome/components/WelcomeImage.tsx

@@ -0,0 +1,9 @@
+import { relativeUrl } from "~/systems/Core";
+
+export function WelcomeImage({ src }: { src: string }) {
+  return (
+    <div className="imgContainer">
+      <img src={relativeUrl(src)} />
+    </div>
+  );
+}