chore: disable ssr for showcase app #563
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dskloetd
reviewed
Jan 20, 2025
|
FYI, e2e test is failing on CI. |
|
@dskloetd did not had time to turn it back to draft, still debugging. I start thinking there is actually an issue in the implementation which become unmasked, somehow, by this change but, as I said, still debugging. Turned it into a draft. |
|
Display issue - or rendering race condition - was indeed reproducible on main and improved in ##565. |
peterpeterparker
added a commit
that referenced
this pull request
Jan 21, 2025
# Motivation Tests in #563 were failing. After debugging, I figured out that the potential display issue actually already existed on the main branch. Specifically, since the segment buttons have no fixed width, depending on the rendering, it's possible that on mount, the buttons are not yet fully rendered—meaning they haven't occupied their full width yet—resulting in the indicator position not being accurately calculated. Similarly, the buttons might be rendered, but the font could take time to load, causing the indicator position to be calculated with the fallback font instead of the final one. Additionally, if the language is changed at runtime, it might result in a change in the buttons' length. Long story short, observing the size of the container and repositioning the indicator when the size changes ensures that the indicator is always correctly positioned. # Changes - Use a `ResizeObserver` to set the indicator position. - Mock `ResizeObserver` globally for vitest # Screenshots Before on main: <img width="1536" alt="Capture d’écran 2025-01-21 à 07 19 52" src="https://github.com/user-attachments/assets/615979f4-fb10-45c1-a1c2-d841d3ea8795" /> After: <img width="1536" alt="Capture d’écran 2025-01-21 à 07 19 37" src="https://github.com/user-attachments/assets/745806a2-cf0b-497a-8924-0aa638c8aa0c" /> # Tests Tests of #563 should pass.
peterpeterparker
added a commit
that referenced
this pull request
Jan 22, 2025
# Motivation Given that the `InfiniteScroll` component will need some adjustments for compatibility with Svelte v5, I thought it would be a good idea to first add an end-to-end test to verify that the scroll works as expected. # Notes Requires #563 configuration to build the showcase app. # Changes - Add a `testId` to the component - Provide some demo and test data within the infinite scroll component page - Write e2e tests that assert that data are loaded on scroll
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Without disabling SSR we would not be able to build the showcase case app once the component
InfiniteScrollis effectively used in the UI. This is becauseIntersectionObserveris not a known NodeJS property.Notes
PR that uses the
InfiniteScrollin the UI is #562.Changes