Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix image re-rendering for movie details #203

Closed
wants to merge 1 commit into from

Conversation

jogelin
Copy link

@jogelin jogelin commented May 26, 2023

Related to #202

TODO:

  • Write UF tests. I see some tests in movie-detail-page-to-movie-detail-page-navigation--warm.uf.ts but it doesn't seem to be used because it is located in the old-flows folder. What is the futur strategy for these tests?

@github-actions
Copy link

github-actions bot commented May 26, 2023

Visit the preview URL for this PR (updated for commit a05e59b):

https://angular-movies-a12d3--fix-image-rerendering-jdmgzccz.web.app

(expires Thu, 27 Jul 2023 13:46:30 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@github-actions

This comment has been minimized.

@BioPhoton
Copy link
Member

The idea was to have all features of the app tested with userflows.

I guess the old folder is a mit of old code the will be deleted and code we will activate again when we tackle the testing topic.

@github-actions

This comment has been minimized.

@github-actions
Copy link

Basic user flow to ensure basic functionality

Date/Time: 2023-06-27 13:46

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
🧭 Initial navigation navigation 🔒 60 100 83 100 90
✔ Initial navigation done snapshot Ø 3/4 16/16 4/5 9/9 -
🧭 Navigate to popular timespan 24/24 - 4/7 - -
✔ Navigation to popular done snapshot Ø 3/4 16/16 5/5 9/9 -
🧭 Navigate to detail page timespan 18/24 - 6/7 - -
✔ Navigation to detail done snapshot Ø 3/4 18/18 4/5 9/9 -
🔒 Budgets

🧭 Initial navigation

Resource Size Budget

Resource Type Transfer Size Over Budget
Script 3.01 MB 1.87 MB
Stylesheet 8.82 KB -
Image 70.96 KB -
Media 0 Bytes -
Font 0 Bytes -
Document 25.85 KB -
Other 6.64 KB -
Third-party 71.55 KB -

Resource Count Budget

Resource Type Requests Over Budget
Script 8 6 requests
Stylesheet 2 1 request
Image 8 -
Media 0 -
Font 0 -
Document 1 -
Other 8 8 requests
Third-party 8 8 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 18946 ms 16446 ms
First Contentful Paint 1958 ms 158 ms
Total Blocking Time 235 ms 35 ms
Speed Index 1958 ms -
Cumulative Layout Shift 0.04 -

Initial Navigation of the Main Pages

Date/Time: 2023-06-27 13:47

Step Name Gather Mode Performance Accessibility Best Practices Seo Pwa
Movie Category List navigation 🔒 57 100 83 100 90
Movie Category List navigation 🔒 80 100 83 100 90
Movie Category List navigation 🔒 81 100 83 100 90
Movie Genre List navigation 🔒 86 100 83 100 90
Movie Detail navigation 🔒 77 100 92 100 90
Person Detail navigation 🔒 60 100 92 100 90
🔒 Budgets

Movie Category List

Resource Size Budget

Resource Type Transfer Size Over Budget
Script 3.01 MB 1.87 MB
Stylesheet 8.82 KB -
Image 70.21 KB -
Media 0 Bytes -
Font 0 Bytes -
Document 25.85 KB -
Other 11.66 KB -
Third-party 76.79 KB -

Resource Count Budget

Resource Type Requests Over Budget
Script 8 6 requests
Stylesheet 2 1 request
Image 7 -
Media 0 -
Font 0 -
Document 1 -
Other 9 9 requests
Third-party 10 10 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 18738 ms 16238 ms
Cumulative Layout Shift 0.11 NaN
First Contentful Paint 1053 ms -
Speed Index 4932 ms -
Total Blocking Time 197 ms -

Movie Category List

Resource Size Budget

Resource Type Transfer Size Over Budget
Stylesheet 234 Bytes -
Image 31.03 KB -
Media 0 Bytes -
Font 0 Bytes -
Script 1.83 KB -
Document 25.85 KB -
Other 11.02 KB -
Third-party 40.69 KB -

Resource Count Budget

Resource Type Requests Over Budget
Stylesheet 2 1 request
Image 7 -
Media 0 -
Font 0 -
Script 8 6 requests
Document 1 -
Other 8 8 requests
Third-party 9 9 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 3455 ms 955 ms
Total Blocking Time 372 ms 172 ms
Cumulative Layout Shift 0.11 NaN
First Contentful Paint 1232 ms -
Speed Index 1232 ms -

Movie Category List

Resource Size Budget

Resource Type Transfer Size Over Budget
Stylesheet 234 Bytes -
Image 36.15 KB -
Media 0 Bytes -
Font 0 Bytes -
Script 1.83 KB -
Document 25.85 KB -
Other 5.84 KB -
Third-party 40.63 KB -

Resource Count Budget

Resource Type Requests Over Budget
Stylesheet 2 1 request
Image 7 -
Media 0 -
Font 0 -
Script 8 6 requests
Document 1 -
Other 6 6 requests
Third-party 7 7 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 3513 ms 1013 ms
Total Blocking Time 406 ms 206 ms
First Contentful Paint 1180 ms -
Speed Index 1180 ms -
Cumulative Layout Shift 0.00 -

Movie Genre List

Resource Size Budget

Resource Type Transfer Size Over Budget
Stylesheet 234 Bytes -
Image 1.43 KB -
Media 0 Bytes -
Font 0 Bytes -
Script 1.83 KB -
Document 25.85 KB -
Other 5.99 KB -
Third-party 5.08 KB -

Resource Count Budget

Resource Type Requests Over Budget
Stylesheet 2 1 request
Image 8 -
Media 0 -
Font 0 -
Script 8 6 requests
Document 1 -
Other 7 7 requests
Third-party 7 7 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 3150 ms 650 ms
Total Blocking Time 335 ms 135 ms
First Contentful Paint 1160 ms -
Speed Index 1497 ms -
Cumulative Layout Shift 0.00 -

Movie Detail

Resource Size Budget

Resource Type Transfer Size Over Budget
Stylesheet 234 Bytes -
Image 42.34 KB -
Media 0 Bytes -
Font 0 Bytes -
Script 60.39 KB -
Document 25.85 KB -
Other 17.99 KB -
Third-party 55.32 KB -

Resource Count Budget

Resource Type Requests Over Budget
Stylesheet 2 1 request
Image 9 3 requests
Media 0 -
Font 0 -
Script 8 6 requests
Document 1 -
Other 15 15 requests
Third-party 8 8 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 3895 ms 1395 ms
Total Blocking Time 404 ms 204 ms
First Contentful Paint 1175 ms -
Speed Index 1418 ms -
Cumulative Layout Shift 0.05 -

Person Detail

Resource Size Budget

Resource Type Transfer Size Over Budget
Stylesheet 234 Bytes -
Image 29.65 KB -
Media 0 Bytes -
Font 0 Bytes -
Script 47.8 KB -
Document 25.85 KB -
Other 7.6 KB -
Third-party 34.52 KB -

Resource Count Budget

Resource Type Requests Over Budget
Stylesheet 2 1 request
Image 9 4 requests
Media 0 -
Font 0 -
Script 8 6 requests
Document 1 -
Other 11 11 requests
Third-party 8 8 requests

Timing Budget

Metric Measurement Over Budget
Largest Contentful Paint 4094 ms 1594 ms
Total Blocking Time 483 ms 283 ms
Cumulative Layout Shift 0.66 NaN
First Contentful Paint 1173 ms -
Speed Index 1676 ms -

@BioPhoton
Copy link
Member

also related:

@BioPhoton
Copy link
Member

I added tests for the src switch:
#247

If you merge here they should pass. In the original PR they fail.

@jogelin Let me know if this is true pls.

@jogelin jogelin marked this pull request as ready for review July 18, 2023 06:15
@jogelin
Copy link
Author

jogelin commented Jul 18, 2023

I added tests for the src switch: #247

If you merge here they should pass. In the original PR they fail.

@jogelin Let me know if this is true pls.

I tested locally by merging your branch into this one and it seems that all tests pass locally at least.
I am just not sure why it doesn't work with the new version of Angular because it should fix it

@BioPhoton
Copy link
Member

is the fix released?

@jogelin
Copy link
Author

jogelin commented Aug 4, 2023

is the fix released?

The v16.2 of Angular is still in RC.

As discussed in that ticket #202, @francesco-buscicchio is open to fix it when the version v16.2 is released

@BioPhoton
Copy link
Member

BioPhoton commented Aug 4, 2023

Ok I did not know when the release is. So still RC ... good!

I will update it immediately when it is released. Maybe give me a ping.

@jogelin jogelin closed this Jul 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants