fix: smooth tab switching with fade animations (#1479)

[Vedag812]

Fixes #1479

Changes

1. Animated WebView fade-in (WebView.swift)

• Changed the abrupt alpha = 0 → 1 toggle to a smooth UIView.animate(withDuration: 0.2) fade-in
• Reduced layout debounce from 150ms to 50ms — just enough for layout stabilization without a visible blank

2. Translucent loading overlay (BrowserTab.swift)

• Removed opaque Color.background from the LoadingProgressView overlay on iPad/macOS
• The loading spinner is now transparent so the underlying web content shows through during tab switch

3. Crossfade transition (CompactViewController.swift)

• Wrapped CompactViewWrapper body in a Group with .animation(.easeInOut(duration: 0.2))
• Added .transition(.opacity) to CompactView for a smooth crossfade when switching tabs on iPhone

[kelson42]

@Vedag812 Thank you very much for your PR. Can you please upload screencast to demonstrate the fix?

[Vedag812]

@Vedag812 Thank you very much for your PR. Can you please upload screencast to demonstrate the fix?

Hi @kelson42 unfortunately I couldn’t share the screencast because Swift works on Mac and i have Windows System but i ma sure the fix will work if it doesnt do reach me out

[Copilot]

Pull request overview

This PR aims to make tab switching visually smoother by replacing abrupt content changes with fade/crossfade animations, reducing perceived blank flashes during transitions (fix for #1479).

Changes:

• Fade in the iOS WKWebView after layout stabilization using a short UIView.animate instead of an immediate alpha toggle.
• Make the loading spinner overlay transparent (so underlying web content remains visible) on the BrowserTab view.
• Add an opacity transition + animation driven by navigation.currentItem for iPhone tab switches in CompactViewController.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
Views/BuildingBlocks/WebView.swift	Reduces debounce delay and animates WebView alpha to fade in after layout.
Views/BrowserTab.swift	Removes opaque overlay background and disables hit testing on the loading overlay spinner.
App/CompactViewController.swift	Adds animation + opacity transition around the compact tab content for crossfading.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

layoutSubject is triggered on every viewDidLayoutSubviews, but the sink now runs an unconditional UIView.animate each time it fires. This can cause repeated/needless animations on later layout passes (rotation, safe-area changes, etc.). Consider guarding so the fade-in runs only once (e.g., check webView.alpha == 0 / a hasFadedIn flag).

[Copilot]

The .transition(.opacity) is unlikely to apply when switching between different .tab(tabID) values because this branch stays active and CompactView is updated rather than inserted/removed. To actually crossfade between tabs, give CompactView a changing identity at this level (e.g., .id(tabID)) or apply the transition to the view whose identity changes so SwiftUI performs a removal/insertion animation.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.59%. Comparing base (30a0113) to head (900ae20).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1480   +/-   ##
=======================================
  Coverage   92.59%   92.59%           
=======================================
  Files          18       18           
  Lines         878      878           
=======================================
  Hits          813      813           
  Misses         65       65           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Vedag812]

Hi @kelson42 @BPerlakiH any updates?

[kelson42]

Hi @kelson42 @BPerlakiH any updates?

@BPerlakiH will review your PR, but give him a few days.

[Vedag812]

Hi @kelson42 @BPerlakiH any updates?

@BPerlakiH will review your PR, but give him a few days.

sure no issues

[BPerlakiH]

@Vedag812 Thank you for the PR.

iPad

On iPad it looks better now:

iPad before

ipad_before.mov

---

iPad after

ipad_after.mov

---

iPhone

On iPhone the composition of the UI is different, and the changes in App/CompactViewController.swift

has no visual effect to be honest:

iPhone before

iphone_before.mov

---

iPhone after

iphone_after.mov

---

macOS

Not relevant in this case, and after testing, there's no visible change on that, so we can ignore it for this review.

---

Conclusion

Please revert the changes in App/CompactViewController.swift, and it should be good to be merged.

[BPerlakiH]

FYA: @kelson42

[kelson42]

FYA: @kelson42

I hardly see a difference and therefore IMHO, the fix is incomplete. I suspect, just an idea: when switching:

• the new tab to display should be ready to display before switching effectively
• point above implies that all tabs a re preloaded
• the switch should ensure we don't display the background of the view (this is the only reason why we can have a "black flash")
• we have to have some kind of very short fading effect

[BPerlakiH]

The "black flash" comes from the fact that the device is in DarkMode, but the ZIM content is not (yet).
When the "modes" are aligned, it is a lot less disturbing:

ipad_light.mov

[BPerlakiH]

Also,if I go frame by frame on the iPad "after" video, it seems there's fade IN, but there's no fade OUT when the switch occurs.

[BPerlakiH]

point above implies that all tabs a re preloaded

I think we need more R&D to do in this area, also the issue: #1403 is very much correlated.