Tune persist scroll feature of BitAppShell (#9925)#9926
Tune persist scroll feature of BitAppShell (#9925)#9926msynk merged 2 commits intobitfoundation:developfrom
Conversation
WalkthroughThe changes update the scroll behavior management within the BitAppShell component. A new private boolean flag tracks location changes and triggers scroll adjustments after render. In both C# and TypeScript files, methods have been renamed and reorganized for clarity. Specifically, scroll calls now differentiate between navigational changes and after-render updates, and the scroll animation behavior in the demo is set to be instant rather than smooth. Changes
Sequence Diagram(s)sequenceDiagram
participant AppShell as BitAppShell Component
participant NavManager as Navigation Manager
participant JSRuntime as JS Runtime
AppShell->>NavManager: Detect location change
NavManager-->>AppShell: Update current URL & set _locationChanged = true
AppShell->>JSRuntime: Invoke BitAppShellLocationChangedScroll(url)
Note over AppShell: AfterRender is triggered
AppShell->>JSRuntime: Invoke BitAppShellAfterRenderScroll(url)
sequenceDiagram
participant TS as AppShell (TypeScript)
participant Browser as Browser Window
TS->>TS: Call initScroll(url) to initialize state
TS->>TS: Invoke locationChangedScroll(url)
TS->>TS: Remove previous scroll listeners
TS->>Browser: Set scroll position based on stored value
TS->>Browser: Add new scroll event listener
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts (1)
14-16: Consider adding URL state management.The
locationChangedScrollmethod only removes the scroll listener but doesn't update the URL state. Consider updating_currentUrlhere to maintain consistency.public static locationChangedScroll(url: string) { + AppShell._currentUrl = url; AppShell.removeScroll(); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs(2 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts(2 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (7)
src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs (1)
12-20: LGTM! Clear separation of scroll management responsibilities.The renaming of
BitAppShellNavigateScrolltoBitAppShellLocationChangedScrolland the addition ofBitAppShellAfterRenderScrollprovide a clearer separation of concerns between location change and post-render scroll management.src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts (2)
7-12: LGTM! Improved initialization logic.The initialization now properly sets up the scroll state for the initial URL.
18-23: LGTM! Robust scroll position restoration.The
afterRenderScrollmethod properly handles scroll position restoration with fallback to 0 for new URLs and uses 'instant' behavior for a better user experience.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts (1)
7-12: LGTM! Consistent scroll behavior.The change to 'instant' scroll behavior aligns with the scroll behavior in BitAppShell, providing a consistent user experience across the application.
src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs (3)
13-13: LGTM! Added location change tracking.The
_locationChangedflag helps coordinate scroll updates with component rendering.
94-99: LGTM! Proper scroll timing.The scroll position is now correctly updated after the component has rendered, ensuring that the DOM is in the right state.
107-108: LGTM! Improved location change handling.The location change handler now properly sets the flag and uses the new scroll method naming.
2 participants
closes #9925
Summary by CodeRabbit
New Features
Refactor