Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
@@ -6,6 +7,7 @@ import injectedModule from "@web3-onboard/injected-wallets";
 import { Networks } from "./model/Networks";
 import { NetworkEnum } from "./model/NetworkEnum";
 
+const route = useRoute();
 const injected = injectedModule();
 
 const web3Onboard = init({
@@ -33,18 +35,25 @@ if (!connectedWallet) {
 </script>
 
 <template>
-  <TopBar />
-  <RouterView v-slot="{ Component }">
-    <template v-if="Component">
-      <Suspense>
-        <component :is="Component"></component>
-        <template #fallback>
-          <appkit-button />
-          <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+  <div class="p-3 sm:p-4 md:p-8">
+    <TopBar />
+    <RouterView v-slot="{ Component }">
+      <template v-if="Component">
+        <Transition name="page" mode="out-in" appear>
+          <div :key="route.fullPath">
+            <Suspense>
+              <template #default>
+                <component :is="Component" />
+              </template>
+              <template #fallback>
+                <div class="flex w-full h-full justify-center items-center">
+                  <SpinnerComponent :width="'16'" :height="'16'" />
+                </div>
+              </template>
+            </Suspense>
           </div>
-        </template>
-      </Suspense>
-    </template>
-  </RouterView>
+        </Transition>
+      </template>
+    </RouterView>
+  </div>
 </template>