From d6b4c4bcd4c7fd1b26b6d7f868e989de19bff285 Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 1 Jul 2026 11:41:51 +0800
Subject: [PATCH 1/5] chore: update resume submodule

---
 external/resume | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/external/resume b/external/resume
index 1a781e0..40bdfde 160000
--- a/external/resume
+++ b/external/resume
@@ -1 +1 @@
-Subproject commit 1a781e0566d0ac6f73d7e0d5d04c6b668aefc7d8
+Subproject commit 40bdfde2d2461bb0d530d84c32cc1a7531d7b344

From 6640dacb610cd62ccb13793083d389587f2c75b1 Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 1 Jul 2026 11:44:33 +0800
Subject: [PATCH 2/5] feat: display pdf instead of html, add credit subtitle

---
 scripts/copy-resume.js                      |   4 +-
 src/components/cmd-outputs/ResumeOutput.tsx | 223 +++++---------------
 src/i18n/messages/en.json                   |   9 +-
 src/i18n/messages/fr.json                   |   9 +-
 4 files changed, 75 insertions(+), 170 deletions(-)

diff --git a/scripts/copy-resume.js b/scripts/copy-resume.js
index f99618a..d22349b 100644
--- a/scripts/copy-resume.js
+++ b/scripts/copy-resume.js
@@ -7,10 +7,10 @@ const destDir = 'public/resume';
 // Ensure destination directory exists
 fs.mkdirSync(destDir, { recursive: true });
 
-// Copy PDF and HTML files
+// Copy PDF files
 const files = fs.readdirSync(srcDir);
 for (const file of files) {
-  if (file.endsWith('.pdf') || file.endsWith('.html')) {
+  if (file.endsWith('.pdf')) {
     fs.copyFileSync(path.join(srcDir, file), path.join(destDir, file));
     console.log(`Copied ${file}`);
   }
diff --git a/src/components/cmd-outputs/ResumeOutput.tsx b/src/components/cmd-outputs/ResumeOutput.tsx
index 2766af2..0d7c9be 100644
--- a/src/components/cmd-outputs/ResumeOutput.tsx
+++ b/src/components/cmd-outputs/ResumeOutput.tsx
@@ -1,163 +1,20 @@
 'use client';
 
-import { useStore } from '@nanostores/react';
-import { Badge, Button, ScrollArea, Typography } from '@nipsys/lsd';
+import { Badge, Button, Typography } from '@nipsys/lsd';
 import { useLocale, useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { $isDarkMode } from '@/stores/theme-store';
+import Link from 'next/link';
 
 const RESUME_PATHS = {
-  en: {
-    pdf: '/resume/Xavier-SALINIERE_resume.EN.pdf',
-    html: '/resume/Xavier-SALINIERE_resume.EN.html',
-  },
-  fr: {
-    pdf: '/resume/Xavier-SALINIERE_resume.FR.pdf',
-    html: '/resume/Xavier-SALINIERE_resume.FR.html',
-  },
+  en: '/resume/Xavier-SALINIERE_resume.EN.pdf',
+  fr: '/resume/Xavier-SALINIERE_resume.FR.pdf',
 };
 
-async function fetchHtml(locale: 'en' | 'fr'): Promise<string> {
-  const response = await fetch(RESUME_PATHS[locale].html);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch resume HTML: ${response.status}`);
-  }
-  return response.text();
-}
-
-function extractContent(html: string): {
-  body: string;
-  style: string;
-  script: string;
-} {
-  const styleMatch = html.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
-  const scriptMatch = html.match(
-    /<script[^>]*type="module"[^>]*>([\s\S]*?)<\/script>/i,
-  );
-  const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
-
-  return {
-    style: styleMatch?.[1] || '',
-    script: scriptMatch?.[1] || '',
-    body: bodyMatch?.[1] || '',
-  };
-}
-
-function ResumeHtml({ htmlContent }: { htmlContent: string }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const shadowRef = useRef<ShadowRoot | null>(null);
-  const isDarkMode = useStore($isDarkMode);
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    if (!shadowRef.current) {
-      shadowRef.current = containerRef.current.attachShadow({ mode: 'open' });
-    }
-    const shadow = shadowRef.current;
-
-    // Clear previous content before re-rendering
-    shadow.innerHTML = '';
-
-    const { style, body, script } = extractContent(htmlContent);
-
-    const hostStyles = `
-      :host {
-        display: block;
-        width: 100%;
-        min-height: 100%;
-      }
-      :host(.dark) {
-        --color-background: var(--color-background-dark, #191e23);
-        --color-dimmed: var(--color-dimmed-dark, #23282d);
-        --color-primary: var(--color-primary-dark, #fbfbfc);
-        --color-secondary: var(--color-secondary-dark, #ccd0d4);
-        --color-accent: var(--color-accent-dark, #00a0d2);
-      }
-      :host(.light) {
-        --color-background: var(--color-background-light, #ffffff);
-        --color-dimmed: var(--color-dimmed-light, #f3f4f5);
-        --color-primary: var(--color-primary-light, #191e23);
-        --color-secondary: var(--color-secondary-light, #6c7781);
-        --color-accent: var(--color-accent-light, #0073aa);
-      }
-      .resume-wrapper {
-        background: var(--color-background);
-        padding: 1.5rem;
-        min-height: 100%;
-      }
-    `;
-
-    const styleEl = document.createElement('style');
-    styleEl.textContent = hostStyles + style;
-    shadow.appendChild(styleEl);
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'resume-wrapper';
-    wrapper.innerHTML = body;
-    shadow.appendChild(wrapper);
-
-    if (script) {
-      // SECURITY: Only allow trusted scripts from bundled resume HTML assets.
-      // The script content comes from our own /public/resume/*.html files,
-      // not from user input. This is safe because we control the source.
-      const wrappedScript = `
-        const originalDefine = customElements.define.bind(customElements);
-        customElements.define = (name, constructor, options) => {
-          if (!customElements.get(name)) {
-            originalDefine(name, constructor, options);
-          }
-        };
-        ${script}
-      `;
-      const scriptEl = document.createElement('script');
-      scriptEl.type = 'module';
-      scriptEl.textContent = wrappedScript;
-      shadow.appendChild(scriptEl);
-    }
-
-    setInitialized(true);
-
-    // Cleanup: Clear shadow root content on unmount to prevent memory leak
-    return () => {
-      if (shadowRef.current) {
-        shadowRef.current.innerHTML = '';
-      }
-    };
-  }, [htmlContent]);
-
-  useEffect(() => {
-    if (!containerRef.current || !initialized) return;
-
-    const host = containerRef.current;
-    if (isDarkMode) {
-      host.classList.add('dark');
-      host.classList.remove('light');
-    } else {
-      host.classList.add('light');
-      host.classList.remove('dark');
-    }
-  }, [isDarkMode, initialized]);
-
-  return <div ref={containerRef} className={isDarkMode ? 'dark' : 'light'} />;
-}
-
 export default function ResumeOutput() {
   const locale = useLocale();
   const t = useTranslations('Resume');
 
-  const [html, setHtml] = useState<string>('');
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetchHtml(locale as 'en' | 'fr')
-      .then(setHtml)
-      .catch((err) => {
-        console.error('Failed to load resume:', err);
-        setError('Failed to load resume');
-      });
-  }, [locale]);
+  const currentLocale = locale === 'fr' ? 'fr' : 'en';
+  const currentPdfPath = RESUME_PATHS[currentLocale];
 
   return (
     <div className="flex flex-col gap-(--lsd-spacing-large) py-(--lsd-spacing-small)">
@@ -170,7 +27,7 @@ export default function ResumeOutput() {
 
       <div className="flex items-center gap-(--lsd-spacing-smaller)">
         <Badge variant="outlined" size="sm">
-          {t('viewing')} {locale.toUpperCase()} {t('version')}
+          {t('viewing')} {currentLocale.toUpperCase()} {t('version')}
         </Badge>
       </div>
 
@@ -181,12 +38,17 @@ export default function ResumeOutput() {
           asChild
           data-prevent-terminal-focus
         >
-          <a href={RESUME_PATHS.en.pdf} download>
+          <a href={RESUME_PATHS.en} download>
             {t('downloadEN')}
           </a>
         </Button>
-        <Button variant="outlined" size="sm" asChild>
-          <a href={RESUME_PATHS.fr.pdf} download data-prevent-terminal-focus>
+        <Button
+          variant="outlined"
+          size="sm"
+          asChild
+          data-prevent-terminal-focus
+        >
+          <a href={RESUME_PATHS.fr} download>
             {t('downloadFR')}
           </a>
         </Button>
@@ -197,21 +59,50 @@ export default function ResumeOutput() {
           className="w-full max-w-6xl h-[600px] border border-(--lsd-color-border) rounded-(--lsd-shape-sm) overflow-hidden"
           data-prevent-terminal-focus
         >
-          <ScrollArea className="h-full">
-            {error ? (
-              <div className="p-4 text-center text-(--lsd-color-text-error)">
-                {error}
-              </div>
-            ) : html ? (
-              <ResumeHtml htmlContent={html} />
-            ) : (
-              <div className="p-4 text-center text-(--lsd-color-text-secondary)">
-                Loading...
-              </div>
-            )}
-          </ScrollArea>
+          <iframe
+            src={currentPdfPath}
+            className="w-full h-full"
+            title="Resume PDF"
+          />
         </div>
       </div>
+
+      <Typography variant="body2" color="secondary">
+        {t('generationPrefix')}
+        <Button
+          variant="link"
+          className="font-bold p-0! text-sm! h-fit!"
+          asChild
+        >
+          <Link href="https://www.npmjs.com/package/resumed" target="_blank">
+            {t('resumed')}
+          </Link>
+        </Button>
+        {t('generationMiddle')}
+        <Button
+          variant="link"
+          className="font-bold p-0! text-sm! h-fit!"
+          asChild
+        >
+          <Link
+            href="https://www.npmjs.com/package/jsonresume-theme-stackoverflow"
+            target="_blank"
+          >
+            {t('stackoverflowTheme')}
+          </Link>
+        </Button>
+        {t('generationSuffix')}
+        <Button
+          variant="link"
+          className="font-bold p-0! text-sm! h-fit!"
+          asChild
+        >
+          <Link href="https://github.com/nipsysdev/resume" target="_blank">
+            {t('repoLink')}
+          </Link>
+        </Button>
+        {t('generationEnd')}
+      </Typography>
     </div>
   );
 }
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 89d8edc..55d4841 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -147,7 +147,14 @@
     "downloadEN": "Download English PDF",
     "downloadFR": "Download French PDF",
     "viewing": "Currently viewing",
-    "version": "version"
+    "version": "version",
+    "generationPrefix": "I use ",
+    "resumed": "resumed",
+    "generationMiddle": " and the ",
+    "stackoverflowTheme": "stackoverflow theme",
+    "generationSuffix": " to generate my resume files. See the repo ",
+    "repoLink": "here",
+    "generationEnd": "."
   },
   "Gallery": {
     "title": "Gallery",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index f325461..772553e 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -146,7 +146,14 @@
     "downloadEN": "Télécharger le PDF en anglais",
     "downloadFR": "Télécharger le PDF en français",
     "viewing": "Version",
-    "version": "actuellement affichée"
+    "version": "actuellement affichée",
+    "generationPrefix": "J'utilise ",
+    "resumed": "resumed",
+    "generationMiddle": " et le thème ",
+    "stackoverflowTheme": "stackoverflow",
+    "generationSuffix": " pour générer mon CV. Voir le repo ",
+    "repoLink": "ici",
+    "generationEnd": "."
   },
   "Gallery": {
     "title": "Galerie",

From 5f1be3ff24806f57a8de2f3a7779875de4dea663 Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 1 Jul 2026 12:16:10 +0800
Subject: [PATCH 3/5] feat: minor changes

---
 src/components/cmd-outputs/ContactOutput.tsx | 20 ++++++++++++++------
 src/components/cmd-outputs/WelcomeOutput.tsx |  2 +-
 src/i18n/messages/en.json                    |  5 +++--
 src/i18n/messages/fr.json                    |  8 +++++---
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/cmd-outputs/ContactOutput.tsx b/src/components/cmd-outputs/ContactOutput.tsx
index 3a61fd9..9467d70 100644
--- a/src/components/cmd-outputs/ContactOutput.tsx
+++ b/src/components/cmd-outputs/ContactOutput.tsx
@@ -49,12 +49,6 @@ export default function ContactOutput() {
       href: 'https://x.com/nipsysdev',
       displayText: '@nipsysdev',
     },
-    {
-      icon: PaperPlaneTiltIcon,
-      labelKey: 'telegram',
-      href: 'https://t.me/nipsysdev',
-      displayText: '@nipsysdev',
-    },
     {
       icon: ButterflyIcon,
       labelKey: 'bluesky',
@@ -83,6 +77,20 @@ export default function ContactOutput() {
       displayText: '@nipsys:nips.im',
       copyable: true,
     },
+    {
+      icon: ChatTeardropTextIcon,
+      labelKey: 'signal',
+      href: 'https://signal.me/#eu/4FynXZ6lCD-qaR0x_CfvmEGVVtnprCVT4YRzyVrn7GVNB71oVHFAL6aP2soYBAI4',
+      displayText: 'nipsysdev.12',
+      copyable: true,
+    },
+    {
+      icon: PaperPlaneTiltIcon,
+      labelKey: 'telegram',
+      href: 'https://t.me/nipsysdev',
+      displayText: '@nipsysdev',
+      copyable: true,
+    },
     {
       icon: EnvelopeIcon,
       labelKey: 'email',
diff --git a/src/components/cmd-outputs/WelcomeOutput.tsx b/src/components/cmd-outputs/WelcomeOutput.tsx
index 8c954d9..29c1880 100644
--- a/src/components/cmd-outputs/WelcomeOutput.tsx
+++ b/src/components/cmd-outputs/WelcomeOutput.tsx
@@ -26,7 +26,7 @@ export default function WelcomeOutput() {
           <TooltipTrigger asChild>
             <Image src={avatar} width={70} alt="Avatar" priority={true} />
           </TooltipTrigger>
-          <TooltipContent side="right" className="max-w-[70vw]">
+          <TooltipContent side="right" className="max-w-[70vw] text-lg!">
             <p className="mb-(--lsd-spacing-base)">
               {t.rich('welcome', {
                 name: (name) => <span className="font-bold">{name}</span>,
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 55d4841..7fd6fc9 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -71,7 +71,8 @@
       "telegram": "Telegram",
       "matrix": "Matrix",
       "email": "Email",
-      "pixelfed": "Pixelfed"
+      "pixelfed": "Pixelfed",
+      "signal": "Signal"
     },
     "copyToast": "Copied to clipboard",
     "copyLabel": "Copy to clipboard"
@@ -113,7 +114,7 @@
   "Welcome": {
     "welcome": "Hi there, I'm <name>Xav</name>! Welcome to my own little corner of cyberspace :)",
     "siteIntro1": "This site can be browsed by clicking on the links in the side navigation.",
-    "siteIntro2": "Or, for a CLI experience... Get started with <cmd></cmd>"
+    "siteIntro2": "Or, for a CLI experience... Get started with <cmd></cmd>."
   },
   "BuildInfo": {
     "title": "Build Information",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index 772553e..048f225 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -70,7 +70,9 @@
       "bluesky": "BlueSky",
       "telegram": "Telegram",
       "matrix": "Matrix",
-      "email": "Courriel"
+      "email": "Courriel",
+      "pixelfed": "Pixelfed",
+      "signal": "Signal"
     },
     "copyToast": "Copié dans le presse-papier",
     "copyLabel": "Copier dans le presse-papier"
@@ -110,9 +112,9 @@
     }
   },
   "Welcome": {
-    "welcome": "Salut, je suis <name>Xav</name>! Bienvenue dans mon petit chez moi en plein cyberspace :)",
+    "welcome": "Bien le bonjour, je suis <name>Xav</name>! Bienvenue dans mon petit chez moi en plein cyberspace :)",
     "siteIntro1": "Ce site peut être parcouru en cliquant sur les liens dans la navigation latérale.",
-    "siteIntro2": "Ou, pour une expérience CLI... Commencez avec <cmd></cmd>"
+    "siteIntro2": "Ou, pour une expérience CLI... Vous pouvez commencer avec <cmd></cmd>."
   },
   "BuildInfo": {
     "title": "Informations du build",

From 5802f7f0e5d144e6a618163464a25c578878ca5b Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 1 Jul 2026 12:54:08 +0800
Subject: [PATCH 4/5] chore: import ordering

---
 src/components/cmd-outputs/ResumeOutput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cmd-outputs/ResumeOutput.tsx b/src/components/cmd-outputs/ResumeOutput.tsx
index 0d7c9be..0068c85 100644
--- a/src/components/cmd-outputs/ResumeOutput.tsx
+++ b/src/components/cmd-outputs/ResumeOutput.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Badge, Button, Typography } from '@nipsys/lsd';
-import { useLocale, useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useLocale, useTranslations } from 'next-intl';
 
 const RESUME_PATHS = {
   en: '/resume/Xavier-SALINIERE_resume.EN.pdf',

From d3991db6640b783cb7663c97660fa4adf4027246 Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 1 Jul 2026 14:52:18 +0800
Subject: [PATCH 5/5] feat: improve load sequence

---
 .../components/TerminalEmulator.test.tsx      | 22 +++--
 src/components/LoadSequence.tsx               | 96 +++++++++++--------
 src/components/cmd-outputs/WelcomeOutput.tsx  |  9 +-
 src/components/layout/MainWrapper.tsx         |  6 ++
 src/components/terminal/TerminalEmulator.tsx  | 10 +-
 src/stores/app-store.ts                       |  4 +
 6 files changed, 94 insertions(+), 53 deletions(-)
 create mode 100644 src/stores/app-store.ts

diff --git a/src/__tests__/components/TerminalEmulator.test.tsx b/src/__tests__/components/TerminalEmulator.test.tsx
index ea761f3..3b10606 100644
--- a/src/__tests__/components/TerminalEmulator.test.tsx
+++ b/src/__tests__/components/TerminalEmulator.test.tsx
@@ -1,6 +1,12 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import TerminalEmulator from '@/components/terminal/TerminalEmulator';
+import { $isAppReady } from '@/stores/app-store';
+import {
+  $terminalHistory,
+  $terminalHistoryVisibleIdx,
+  $terminalPromptRef,
+} from '@/stores/terminal-store';
 import type { CommandEntry } from '@/types/terminal';
 import { Command } from '@/types/terminal';
 
@@ -21,6 +27,12 @@ vi.mock('@/stores/terminal-store', () => ({
   initializeTerminal: vi.fn(),
 }));
 
+vi.mock('@/stores/app-store', () => ({
+  $isAppReady: {
+    get: vi.fn(() => true),
+  },
+}));
+
 vi.mock('next-intl', () => ({
   useTranslations: vi.fn(() => (key: string) => key),
 }));
@@ -43,23 +55,17 @@ vi.mock('@/components/cmd-outputs/UnknownCmdOutput', () => ({
   )),
 }));
 
-import {
-  $terminalHistory,
-  $terminalHistoryVisibleIdx,
-  $terminalPromptRef,
-  initializeTerminal,
-} from '@/stores/terminal-store';
-
 describe('TerminalEmulator', () => {
   const mockHistoryGet = vi.mocked($terminalHistory.get);
   const mockHistoryVisibleIdxGet = vi.mocked($terminalHistoryVisibleIdx.get);
   const mockPromptRefSet = vi.mocked($terminalPromptRef.set);
-  const _mockInitializeTerminal = vi.mocked(initializeTerminal);
+  const mockIsAppReadyGet = vi.mocked($isAppReady.get);
 
   beforeEach(() => {
     vi.clearAllMocks();
     mockHistoryGet.mockReturnValue([]);
     mockHistoryVisibleIdxGet.mockReturnValue(0);
+    mockIsAppReadyGet.mockReturnValue(true);
   });
 
   afterEach(() => {
diff --git a/src/components/LoadSequence.tsx b/src/components/LoadSequence.tsx
index b90af41..56d9ea6 100644
--- a/src/components/LoadSequence.tsx
+++ b/src/components/LoadSequence.tsx
@@ -2,6 +2,7 @@
 
 import { useStore } from '@nanostores/react';
 import { useEffect, useMemo, useState } from 'react';
+import { $isAppMounted, $isAppReady } from '@/stores/app-store';
 import { $isDarkMode } from '@/stores/theme-store';
 
 interface LoadSequenceProps {
@@ -10,13 +11,22 @@ interface LoadSequenceProps {
 
 export default function LoadSequence({ children }: LoadSequenceProps) {
   const [currentStep, setCurrentStep] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+  const [animationDone, setAnimationDone] = useState(false);
   const isDarkMode = useStore($isDarkMode);
+  const isAppMounted = useStore($isAppMounted);
+
+  const isLoading = !animationDone || !isAppMounted;
 
   useEffect(() => {
     document.body.style.visibility = 'visible';
   }, []);
 
+  useEffect(() => {
+    if (!isLoading) {
+      $isAppReady.set(true);
+    }
+  }, [isLoading]);
+
   const steps = useMemo(
     () => [
       { message: '> Detecting theme preference...', delay: 600 },
@@ -40,7 +50,7 @@ export default function LoadSequence({ children }: LoadSequenceProps) {
 
       return () => clearTimeout(timer);
     } else {
-      setIsLoading(false);
+      setAnimationDone(true);
     }
   }, [currentStep, steps]);
 
@@ -48,47 +58,53 @@ export default function LoadSequence({ children }: LoadSequenceProps) {
     'opacity-0 animate-[showInstant_0s_ease-in-out_forwards]';
   const stepHeight = 'h-[24px] leading-6';
 
-  if (!isLoading && children) {
-    return <>{children}</>;
-  }
-
   return (
-    <div className="p-8 text-sm font-medium leading-5">
-      <style>{`
-        @keyframes showInstant {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-      `}</style>
-      <div className="flex flex-col pt-[24px] relative">
-        {/* Static HTML steps that display immediately */}
-        <div
-          className={`top-0 absolute ${fadeInAnimation}`}
-          style={{ animationDelay: '200ms' }}
-        >
-          <span>{'> Connected to IPFS'}</span>
-        </div>
-        <div
-          className={`top-[24px] ${currentStep ? '' : fadeInAnimation} h-0`}
-          style={{ animationDelay: '600ms' }}
-        >
-          <span>{'> Loading core chunks'}</span>
-        </div>
+    <>
+      <div
+        aria-hidden={isLoading}
+        className={isLoading ? 'invisible h-0 overflow-hidden' : undefined}
+      >
+        {children}
+      </div>
 
-        <div className="flex flex-col mt-[24px]">
-          {steps.slice(0, currentStep).map((step) => (
-            <div className={stepHeight} key={step.message}>
-              {step.message}
+      {isLoading && (
+        <div className="p-8 text-sm font-medium leading-5">
+          <style>{`
+          @keyframes showInstant {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        `}</style>
+          <div className="flex flex-col pt-[24px] relative">
+            <div
+              className={`top-0 absolute ${fadeInAnimation}`}
+              style={{ animationDelay: '200ms' }}
+            >
+              <span>{'> Connected to IPFS'}</span>
             </div>
-          ))}
-        </div>
-        <div
-          className={`${fadeInAnimation}`}
-          style={{ animationDelay: '600ms' }}
-        >
-          <span className="animate-pulse">█</span>
+            <div
+              className={`top-[24px] ${currentStep ? '' : fadeInAnimation} h-0`}
+              style={{ animationDelay: '600ms' }}
+            >
+              <span>{'> Loading core chunks'}</span>
+            </div>
+
+            <div className="flex flex-col mt-[24px]">
+              {steps.slice(0, currentStep).map((step) => (
+                <div className={stepHeight} key={step.message}>
+                  {step.message}
+                </div>
+              ))}
+            </div>
+            <div
+              className={`${fadeInAnimation}`}
+              style={{ animationDelay: '600ms' }}
+            >
+              <span className="animate-pulse">█</span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 }
diff --git a/src/components/cmd-outputs/WelcomeOutput.tsx b/src/components/cmd-outputs/WelcomeOutput.tsx
index 29c1880..dce44f3 100644
--- a/src/components/cmd-outputs/WelcomeOutput.tsx
+++ b/src/components/cmd-outputs/WelcomeOutput.tsx
@@ -9,6 +9,7 @@ import {
 } from '@nipsys/lsd';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 import avatar from '@/assets/nipsys.webp';
 import { $scrollY } from '@/stores/terminal-store';
 import { Command } from '@/types/terminal';
@@ -17,7 +18,13 @@ import CmdLink from '../terminal/CmdLink';
 export default function WelcomeOutput() {
   const t = useTranslations('Welcome');
   const scrollY = useStore($scrollY);
-  const showTooltip = scrollY === 0;
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, []);
+
+  const showTooltip = scrollY === 0 && isReady;
 
   return (
     <TooltipProvider>
diff --git a/src/components/layout/MainWrapper.tsx b/src/components/layout/MainWrapper.tsx
index 884074a..6e91599 100644
--- a/src/components/layout/MainWrapper.tsx
+++ b/src/components/layout/MainWrapper.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import { useEffect } from 'react';
 import { Toaster } from 'sonner';
+import { $isAppMounted } from '@/stores/app-store';
 import Sidenav from './Sidenav';
 
 export default function MainWrapper({
@@ -8,6 +10,10 @@ export default function MainWrapper({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  useEffect(() => {
+    $isAppMounted.set(true);
+  }, []);
+
   return (
     <>
       <Sidenav>{children}</Sidenav>
diff --git a/src/components/terminal/TerminalEmulator.tsx b/src/components/terminal/TerminalEmulator.tsx
index 1c15cd3..5771208 100644
--- a/src/components/terminal/TerminalEmulator.tsx
+++ b/src/components/terminal/TerminalEmulator.tsx
@@ -3,6 +3,7 @@
 import { useStore } from '@nanostores/react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
+import { $isAppReady } from '@/stores/app-store';
 import {
   $terminalHistory,
   $terminalHistoryVisibleIdx,
@@ -21,6 +22,7 @@ export default function TerminalEmulator({
 }: TerminalEmulatorProps) {
   const history = useStore($terminalHistory);
   const historyVisibleIdx = useStore($terminalHistoryVisibleIdx);
+  const isAppReady = useStore($isAppReady);
 
   const t = useTranslations('Terminal');
 
@@ -33,20 +35,20 @@ export default function TerminalEmulator({
   }, []);
 
   useEffect(() => {
-    if (hasWindow) {
+    if (hasWindow && isAppReady) {
       setTimeout(() => {
         $terminalPromptRef.set(mainPrompt);
         mainPrompt.current?.scrollIntoView();
         mainPrompt.current?.focus();
       }, 100);
     }
-  }, [hasWindow]);
+  }, [hasWindow, isAppReady]);
 
   useEffect(() => {
-    if (hasWindow) {
+    if (hasWindow && isAppReady) {
       initializeTerminal(initialCommand);
     }
-  }, [hasWindow, initialCommand]);
+  }, [hasWindow, isAppReady, initialCommand]);
 
   const focusTerminal = (target: HTMLElement) => {
     if (
diff --git a/src/stores/app-store.ts b/src/stores/app-store.ts
new file mode 100644
index 0000000..453ca6a
--- /dev/null
+++ b/src/stores/app-store.ts
@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+
+export const $isAppMounted = atom<boolean>(false);
+export const $isAppReady = atom<boolean>(false);