ui/src/components/StaleInviteModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { app, dismissStaleInvite } from '../lib/app.svelte';
+  import { router } from '../lib/router.svelte';
   import { t } from '../lib/i18n/index.svelte';
   import { botUsername } from '../lib/deeplink';
   import { insideTelegram, telegramDialogsAvailable, telegramOpenLink, telegramShowPopup } from '../lib/telegram';
@@ -26,9 +27,13 @@
   // captured at init: this component mounts before bootstrap loads the SDK, so a captured value
   // would be stale. The popup's "open bot" button opens the bot chat; any other dismissal clears the
   // notice; the `shown` guard fires it once per notice.
+  // The notice is raised during boot; wait until the loading cover for the current route is gone —
+  // the tile splash on the lobby (splashDone), the plain loading screen elsewhere (app.ready) — so
+  // the native popup never appears over the splash.
+  const ready = $derived(router.route.name === 'lobby' ? app.splashDone : app.ready);
   let shown = false;
   $effect(() => {
-    if (app.staleInvite && !shown && insideTelegram() && telegramDialogsAvailable()) {
+    if (app.staleInvite && !shown && ready && insideTelegram() && telegramDialogsAvailable()) {
       shown = true;
       void telegramShowPopup(
         botInfoPopup(t('friends.staleInviteTitle'), t('friends.staleInvite'), username ?? '', t('common.ok')),
@@ -39,7 +44,7 @@
   });
 </script>
 
-{#if app.staleInvite && !(insideTelegram() && telegramDialogsAvailable())}
+{#if app.staleInvite && ready && !(insideTelegram() && telegramDialogsAvailable())}
   <Modal title={t('friends.staleInviteTitle')} onclose={dismissStaleInvite}>
     <p class="msg">{parts[0]}{#if username}<button type="button" class="bot" onclick={openBot}>@{username}</button>{/if}{parts[1] ?? ''}</p>
     <button class="ok" onclick={dismissStaleInvite}>{t('common.ok')}</button>

ui/src/components/WelcomeRedeemModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { app, dismissWelcomeRedeem } from '../lib/app.svelte';
+  import { router } from '../lib/router.svelte';
   import { t } from '../lib/i18n/index.svelte';
   import { botUsername } from '../lib/deeplink';
   import { insideTelegram, telegramDialogsAvailable, telegramOpenLink, telegramShowPopup } from '../lib/telegram';
@@ -29,9 +30,13 @@
   // captured at init: this component mounts before bootstrap loads the SDK, so a captured value
   // would be stale. The popup's "open bot" button opens the bot chat; any other dismissal clears it;
   // the `shown` guard fires it once per greeting.
+  // The greeting is raised during boot; wait until the loading cover for the current route is gone —
+  // the tile splash on the lobby (splashDone), the plain loading screen elsewhere (app.ready) — so
+  // the native popup never appears over the splash.
+  const ready = $derived(router.route.name === 'lobby' ? app.splashDone : app.ready);
   let shown = false;
   $effect(() => {
-    if (app.welcomeRedeem && !shown && insideTelegram() && telegramDialogsAvailable()) {
+    if (app.welcomeRedeem && !shown && ready && insideTelegram() && telegramDialogsAvailable()) {
       shown = true;
       void telegramShowPopup(
         botInfoPopup(t('friends.welcomeRedeemTitle'), t('friends.welcomeRedeem', { name }), username ?? '', t('common.ok')),
@@ -42,7 +47,7 @@
   });
 </script>
 
-{#if app.welcomeRedeem && !(insideTelegram() && telegramDialogsAvailable())}
+{#if app.welcomeRedeem && ready && !(insideTelegram() && telegramDialogsAvailable())}
   <Modal title={t('friends.welcomeRedeemTitle')} onclose={dismissWelcomeRedeem}>
     <p class="msg">{parts[0]}{#if username}<button type="button" class="bot" onclick={openBot}>@{username}</button>{/if}{parts[1] ?? ''}</p>
     <button class="ok" onclick={dismissWelcomeRedeem}>{t('common.ok')}</button>