Skip to content

Conversation

@Myestery
Copy link
Collaborator

@Myestery Myestery commented Sep 17, 2025

This pull request improves the lazy loading behavior and caching strategy for images in the LazyImage.vue component. The most significant changes are focused on optimizing image rendering and resource management, as well as improving code clarity.

Lazy loading behavior improvements:

  • Changed the <img> element to render only when cachedSrc is available, ensuring that images are not displayed before they are ready.
  • Updated watchers in LazyImage.vue to use clearer variable names (shouldLoadVal instead of shouldLoad) for better readability and maintainability. [1] [2]

Caching strategy enhancement:

  • Modified the fetch call in mediaCacheService.ts to use { cache: 'force-cache' }, which leverages the browser's cache more aggressively when loading media, potentially improving performance and reducing network requests.

┆Issue is synchronized with this Notion page by Unito

@Myestery Myestery requested a review from a team as a code owner September 17, 2025 19:49
@dosubot dosubot bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Sep 17, 2025
@github-actions
Copy link

github-actions bot commented Sep 17, 2025

🎭 Playwright Test Results

All tests passed!

⏰ Completed at: 09/17/2025, 08:01:00 PM UTC

📈 Summary

  • Total Tests: 450
  • Passed: 421 ✅
  • Failed: 0
  • Flaky: 0
  • Skipped: 29 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 414 / ❌ 0 / ⚠️ 0 / ⏭️ 29
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 4 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@christian-byrne
Copy link
Contributor

What is the relation to Safari?

Copy link
Collaborator Author

@Myestery Myestery left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, the image load event was buggy there.
Had to rely on something else but it worked on safari finally

@Myestery
Copy link
Collaborator Author

What is the relation to Safari?

Safari doesn't trigger load event in images like other chrome based browsers

@christian-byrne christian-byrne added platform:macos Issue specifically occurs on macOS browser:safari labels Sep 18, 2025
@christian-byrne christian-byrne merged commit 78d0ea6 into main Sep 18, 2025
33 checks passed
@christian-byrne christian-byrne deleted the safari/lazyImages branch September 18, 2025 18:20
Myestery added a commit that referenced this pull request Sep 19, 2025
This pull request improves the lazy loading behavior and caching
strategy for images in the `LazyImage.vue` component. The most
significant changes are focused on optimizing image rendering and
resource management, as well as improving code clarity.

**Lazy loading behavior improvements:**

* Changed the `<img>` element to render only when `cachedSrc` is
available, ensuring that images are not displayed before they are ready.
* Updated watchers in `LazyImage.vue` to use clearer variable names
(`shouldLoadVal` instead of `shouldLoad`) for better readability and
maintainability.
[[1]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L80-R81)
[[2]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L96-R96)

**Caching strategy enhancement:**

* Modified the `fetch` call in `mediaCacheService.ts` to use `{ cache:
'force-cache' }`, which leverages the browser's cache more aggressively
when loading media, potentially improving performance and reducing
network requests.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5626-LazyImage-on-Safari-2716d73d365081eeb1d3c2a96be4d408)
by [Unito](https://www.unito.io)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

browser:safari platform:macos Issue specifically occurs on macOS size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants