Add native-like page transitions with @ssgoi/svelte

[google-labs-jules]

User description

Implemented native-like page transitions using @ssgoi/svelte. This involves wrapping the application in the Ssgoi provider at the root level and using SsgoiTransition components in sub-layouts to animate content changes while preserving persistent UI elements like the sidebar. Conflicting CSS from the previous View Transitions API implementation was removed.

---

PR created automatically by Jules for task 15926928613220690186 started by @mudiageo

---

PR Type

Enhancement

---

Description

• Replace View Transitions API with @ssgoi/svelte library

• Wrap root layout with Ssgoi provider and fade transition

• Add SsgoiTransition components to all route layouts

• Remove conflicting View Transitions CSS rules

---

Diagram Walkthrough

flowchart LR
  A["Root Layout"] -->|"Wraps with Ssgoi provider"| B["Ssgoi Provider"]
  B -->|"Applies fade transition"| C["Page Transitions"]
  D["App Layout"] -->|"Uses SsgoiTransition"| C
  E["Marketing Layout"] -->|"Uses SsgoiTransition"| C
  F["Auth Layout"] -->|"Uses SsgoiTransition"| C
  G["Onboarding Layout"] -->|"Uses SsgoiTransition"| C
  H["Share Layout"] -->|"Uses SsgoiTransition"| C
  I["Old View Transitions CSS"] -->|"Removed"| J["Animations CSS"]

Loading

File Walkthrough

	Relevant files
Dependencies	2 files package.json Add @ssgoi/svelte dependency                                                          +2/-1      pnpm-lock.yaml Lock @ssgoi/svelte and core packages                                          +20/-0
Enhancement	6 files +layout.svelte Wrap app with Ssgoi provider                                                          +7/-12    +layout.svelte Replace View Transitions with SsgoiTransition                        +3/-2      +layout.svelte Add SsgoiTransition to marketing layout                                    +4/-1      +layout.svelte Create auth layout with SsgoiTransition                                    +10/-0    +layout.svelte Create onboarding layout with SsgoiTransition                        +10/-0    +layout.svelte Create share layout with SsgoiTransition                                  +10/-0
Bug fix	1 files animations.css Remove View Transitions API CSS rules                                        +0/-39

---

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
codereview-live	Ready	Preview, Comment	Jan 24, 2026 10:29am

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Supply chain dependency Description: A new third-party runtime dependency (@ssgoi/svelte with a caret range ^4.0.0) is introduced, which can create a supply-chain risk if a future minor/patch release becomes compromised; consider pinning, using lockfile integrity/allowlists, and verifying the package provenance. package.json [74-92] Referred Code "dependencies": { "@aws-sdk/client-s3": "^3.947.0", "@aws-sdk/s3-request-presigner": "^3.947.0", "@ffmpeg/ffmpeg": "^0.12.15", "@ffmpeg/util": "^0.12.2", "@octokit/rest": "^22.0.1", "@ssgoi/svelte": "^4.0.0", "@tauri-apps/plugin-fs": "~2", "@zumer/snapdom": "^2.0.1", "better-auth": "^1.4.4", "file-saver": "^2.0.5", "fluent-ffmpeg": "^2.1.3", "jszip": "^3.10.1", "nodemailer": "^7.0.11", "peerjs": "^1.5.5", "postgres": "^3.4.7", "resend": "^6.5.2", "stripe": "^20.0.0" },
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Reconsider using an external transition library Re-evaluate the use of the @ssgoi/svelte library. Consider reverting to the native View Transitions API, which SvelteKit supports, to avoid an unnecessary external dependency and simplify maintenance. Examples: src/routes/+layout.svelte [10-51] import { Ssgoi } from '@ssgoi/svelte'; import { fade } from '@ssgoi/svelte/view-transitions'; let { children } = $props(); // Apply settings on mount and when they change onMount(() => { // Apply theme const theme = settingsStore.settings.theme; if (theme === 'system') { ... (clipped 32 lines) src/lib/styles/animations.css [3] Solution Walkthrough: Before: // src/routes/+layout.svelte import { Ssgoi } from '@ssgoi/svelte'; import { fade } from '@ssgoi/svelte/view-transitions'; <Ssgoi config={{ defaultTransition: fade() }}> {@render children()} </Ssgoi> // src/routes/(app)/+layout.svelte import { SsgoiTransition } from '@ssgoi/svelte'; import { page } from '$app/state'; <main> <SsgoiTransition id={page.url.pathname}> {@render children()} </SsgoiTransition> </main> After: // src/routes/+layout.svelte import { onNavigate } from '$app/navigation'; onNavigate((navigation) => { if (!document.startViewTransition) return; return new Promise((resolve) => { document.startViewTransition(async () => { resolve(); await navigation.complete; }); }); }); {@render children()} // src/lib/styles/animations.css ::view-transition-old(root) { animation: ... fade-out; } ::view-transition-new(root) { animation: ... fade-in; } Suggestion importance[1-10]: 8 __ Why: This suggestion raises a significant architectural concern about adding a new dependency for functionality that is natively supported by browsers and SvelteKit, which the PR is actively removing.	Medium
Possible issue	Fix page store import path Correct the import path for the page store from '$app/state' to '$app/stores' to align with current SvelteKit standards and prevent a runtime error. src/routes/(auth)/+layout.svelte [2] -import { page } from '$app/state'; +import { page } from '$app/stores'; Apply / Chat Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies and fixes a critical bug. The import path '$app/state' is deprecated in SvelteKit, and using it would cause a runtime error. Changing it to '$app/stores' is necessary for the application to work correctly.	Medium
	Correct page store import Correct the import path for the page store from '$app/state' to '$app/stores' to align with current SvelteKit standards and prevent a runtime error. src/routes/(marketing)/+layout.svelte [2] -import { page } from '$app/state'; +import { page } from '$app/stores'; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies and fixes a critical bug. The import path '$app/state' is deprecated in SvelteKit, and using it would cause a runtime error. Changing it to '$app/stores' is necessary for the application to work correctly.	Medium
	Use full URL for transition key Use page.url.href instead of page.url.pathname for the SsgoiTransition id prop to ensure transitions trigger on all URL changes, including query parameters and hashes. src/routes/(app)/+layout.svelte [421-423] -<SsgoiTransition id={page.url.pathname}> +<SsgoiTransition id={page.url.href}> {@render children()} </SsgoiTransition> Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out that using page.url.pathname as the key will not trigger transitions on query parameter or hash changes. Switching to page.url.href makes the transition behavior more robust and consistent for all types of navigation.	Low
More