Fix first-time window flicker & clock panel flicker issue

[Jack251970]

Fix first-time window flicker & clock panel flicker issue

Fix first-time window flicker.
Fix clock panel flicker.

[Copilot]

Pull Request Overview

This PR aims to fix issues related to first-time window flicker as well as clock panel flicker by updating the way UI element properties (such as opacity and visibility) are managed and animated. Key changes include:

• Introduction of new viewmodel properties (ClockPanelVisibility, ClockPanelOpacity, and SearchIconOpacity) to drive UI state.
• Moving UI update logic inside Dispatcher.Invoke calls to ensure thread safety.
• Removal of direct UI element property assignments in favor of updating viewmodel properties in MainWindow.xaml.cs.

Reviewed Changes

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

File	Description
Flow.Launcher/ViewModel/MainViewModel.cs	Added viewmodel properties and updated Show/Hide logic to manage flickering.
Flow.Launcher/MainWindow.xaml.cs	Removed direct UI element updates in favor of viewmodel-driven changes and updated animation handling.

Files not reviewed (1)

• Flow.Launcher/MainWindow.xaml: Language not supported

Comments suppressed due to low confidence (2)

Flow.Launcher/MainWindow.xaml.cs:888

• The animation is applied to the ClockPanel UI element (line 920) while the viewmodel property is updated here. Ensure that the viewmodel changes are properly reflected in the UI—either by relying solely on data binding for animations or by consistently updating the UI element properties alongside the viewmodel.

_viewModel.ClockPanelOpacity = 0.0;  // Set to 0 in case Opacity animation affects it

Flow.Launcher/MainWindow.xaml.cs:301

• Since the code now assigns the UI opacity via the viewmodel property instead of directly modifying the UI element, please verify that the corresponding data binding for ClockPanel.Opacity is properly configured to update the UI as intended.

_viewModel.ClockPanelOpacity = 0.0;

[github-actions]

@check-spelling-bot Report

🔴 Please review

See the 📂 files view, the 📜action log, or 📝 job summary for details.

❌ Errors	Count
❌ forbidden-pattern	24
⚠️ non-alpha-in-dictionary	19

See ❌ Event descriptions for more information.

Forbidden patterns 🙅 (1)

In order to address this, you could change the content to not match the forbidden patterns (comments before forbidden patterns may help explain why they're forbidden), add patterns for acceptable instances, or adjust the forbidden patterns themselves.

These forbidden patterns matched content:

s.b. workaround(s)

\bwork[- ]arounds?\b

If the flagged items are 🤯 false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it,
  try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[gitstream-cm]

🥷 Code experts: onesounds

Jack251970, onesounds have most 👩‍💻 activity in the files.
Jack251970, onesounds have most 🧠 knowledge in the files.

See details

Flow.Launcher/MainWindow.xaml

Activity based on git-commit:

	Jack251970	onesounds
MAR	24 additions & 19 deletions
FEB	1 additions & 1 deletions
JAN
DEC
NOV	1 additions & 1 deletions
OCT

Knowledge based on git-blame:
onesounds: 88%
Jack251970: 4%

Flow.Launcher/MainWindow.xaml.cs

Activity based on git-commit:

	Jack251970	onesounds
MAR	810 additions & 787 deletions	327 additions & 141 deletions
FEB	1 additions & 1 deletions	8 additions & 4 deletions
JAN
DEC	5 additions & 10 deletions
NOV
OCT

Knowledge based on git-blame:
Jack251970: 59%
onesounds: 19%

Flow.Launcher/ViewModel/MainViewModel.cs

Activity based on git-commit:

	Jack251970	onesounds
MAR	397 additions & 411 deletions	293 additions & 201 deletions
FEB	63 additions & 21 deletions	23 additions & 25 deletions
JAN	17 additions & 21 deletions
DEC	59 additions & 63 deletions
NOV	39 additions & 15 deletions
OCT

Knowledge based on git-blame:
Jack251970: 23%
onesounds: 11%

To learn more about /:\ gitStream - Visit our Docs

[gitstream-cm]

Be a legend 🏆 by adding a before and after screenshot of the changes you made, especially if they are around UI/UX.

[gitstream-cm]

Be a legend 🏆 by adding a before and after screenshot of the changes you made, especially if they are around UI/UX.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors the UI state management of the launcher. New bindings for opacity and visibility have been added to the ClockPanel and SearchIcon in the XAML. The code-behind now delegates state control to the MainViewModel, which has been expanded with new public properties and updated Show/Hide methods. This centralizes UI logic in accordance with MVVM principles.

Changes

File(s)	Change Summary
Flow.Launcher/MainWindow.xaml Flow.Launcher/MainWindow.xaml.cs	Added new bindings for ClockPanel (Opacity, Visibility) and SearchIcon (Opacity) in the XAML; code-behind now updates view model properties instead of manipulating UI directly.
Flow.Launcher/.../MainViewModel.cs	Introduced new public properties (ClockPanelVisibility, ClockPanelOpacity, SearchIconOpacity) and updated the Show/Hide methods to control UI transitions via dispatcher.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant MW as MainWindow
  participant CB as Code-behind
  participant VM as MainViewModel
  U->>MW: Launch Application
  MW->>CB: Trigger OnLoaded Event
  CB->>VM: Update UI state (opacity, visibility)
  VM-->>CB: Return updated property values
  CB->>MW: Render ClockPanel & SearchIcon with new settings
  MW->>U: Display updated UI

Loading

Possibly related PRs

• Fix issue that mainVM fails to work #3296: Updates in the MainViewModel for managing UI element properties closely align with these changes.
• Fix possible content frame navigation issue in welcome window & setting window #3088: Similar modifications in MainWindow.xaml and its code-behind, focusing on new binding implementations.
• Fix hide window startup & Close InvalidOperationException #3390: Changes to the OnLoaded method for handling UI updates through view model properties relate directly to this PR.

Suggested labels

kind/ui, Dev branch only, 10 min review

Suggested reviewers

• onesounds
• jjw24

Poem

I'm a little bunny, hopping with delight,
I updated the bindings to make the UI light.
ClockPanel and SearchIcon now dance with grace,
ViewModel shows the changes at a lively pace.
With a hop and a click, our code is on track,
This rabbit cheers for a cleaner MVVM stack!
Happy hops to new code! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a497d8 and 693ba52.

📒 Files selected for processing (3)

• Flow.Launcher/MainWindow.xaml (2 hunks)
• Flow.Launcher/MainWindow.xaml.cs (3 hunks)
• Flow.Launcher/ViewModel/MainViewModel.cs (4 hunks)

🧰 Additional context used

🧬 Code Definitions (1)

Flow.Launcher/ViewModel/MainViewModel.cs (2)

Flow.Launcher/MainWindow.xaml.cs (3)

• MainWindow (30-1048)
• MainWindow (70-82)
• Task (618-625)

Flow.Launcher.Infrastructure/Win32Helper.cs (2)

• Win32Helper (19-491)
• DWMSetCloakForWindow (30-39)

⏰ Context from checks skipped due to timeout of 90000ms (4)

• GitHub Check: gitStream.cm
• GitHub Check: gitStream.cm
• GitHub Check: gitStream.cm
• GitHub Check: gitStream.cm

🔇 Additional comments (13)

Flow.Launcher/MainWindow.xaml (2)

293-295: Good MVVM implementation for ClockPanel.

The new bindings for Opacity and Visibility on the ClockPanel allow the view model to properly control these UI properties, which helps resolve the flickering issues by centralizing state management.

---

323-323: Improved SearchIcon control with opacity binding.

Adding the opacity binding to the SearchIcon element completes the MVVM implementation for both UI elements affected by flickering, delegating state management to the view model.

Flow.Launcher/ViewModel/MainViewModel.cs (5)

13-13: Appropriate System.Windows.Threading import added.

The imported namespace is necessary for the Dispatcher operations used in the Show and Hide methods to manage UI thread rendering.

---

764-767: Good addition of UI property bindings.

These new properties provide the necessary backing store for the XAML bindings, allowing centralized control of UI element visibility and opacity from the view model.

---

1457-1480: Effective flickering prevention in Show method.

The implementation uses several key techniques to prevent flickering:

1. Dispatcher invocation with Render priority ensures UI updates happen synchronously
2. DWM cloak removal before making the window visible
3. Conditional opacity settings based on animation preferences
4. Proper visibility management based on application state

This approach addresses the first-time window flicker issue by ensuring all UI elements are properly initialized before becoming visible.

---

1530-1550: Comprehensive flickering prevention in Hide method.

The implementation provides a robust solution by:

1. Using Dispatcher to synchronize UI updates
2. Explicitly setting element opacity to 0 for clean transitions
3. Forcing layout updates with UpdateLayout() calls
4. Applying DWM cloak to completely hide the window

These changes effectively prevent flickering by ensuring proper UI state transitions.

---

1557-1558: Smart delay to prevent clock flickering.

Adding a short delay before completing the hide operation ensures animations and state changes are fully processed, preventing the clock panel from flickering during window transitions.

Flow.Launcher/MainWindow.xaml.cs (6)

301-303: Clear opacity reset on deactivation.

Setting both ClockPanel and SearchIcon opacity to 0 when the window loses focus ensures a clean visual state transition, helping prevent flickering when the window is reactivated later.

---

880-883: Clear condition logic for clock visibility.

The condition for showing the clock panel is well-defined and readable, only showing it when there's no query text and no context/history views are visible.

---

887-889: Proper MVVM implementation for context menu state.

Instead of directly manipulating UI properties, the code now updates the view model properties, allowing the bound UI elements to react appropriately through the binding system.

---

895-897: Consistent view model property updates.

Using the same pattern for all visibility conditions ensures consistent behavior across different application states, which helps prevent flickering.

---

901-920: Smooth fade-out animation with proper state management.

The animation code properly coordinates with the view model:

1. Sets the _isClockPanelAnimating flag to prevent conflicting animations
2. Animates opacity from 1.0 to 0.0 for a smooth transition
3. Updates the view model property only after animation completes
4. Properly resets the animating flag

This prevents flickering by ensuring smooth transitions between states.

---

923-942: Effective fade-in animation implementation.

The animation code for showing the clock panel follows good practices:

1. First updates the visibility property to ensure the element can be seen
2. Uses a smooth opacity animation for visual transition
3. Properly coordinates state with the _isClockPanelAnimating flag
4. Executed with DispatcherPriority.Render for optimal rendering

This implementation helps prevent flickering by ensuring proper visual transitions.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.