refactor: improve loading animation and debug panel styles by WTW0313 · Pull Request #24075 · langgenius/dify

WTW0313 · 2025-08-18T02:57:49Z

Important

Make sure you have read our contribution guidelines
Ensure there is an associated issue and you have been assigned to it
Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Screenshots

Before	After

Checklist

This change requires a documentation update, included: Dify Document
I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
I've updated the documentation accordingly.
I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

…al effects

…isual effects

Copilot

Pull Request Overview

This PR refactors the styling and code quality in two components by updating CSS classes and improving code consistency. The changes focus on visual improvements to the debug panel background and modernizing the loading animation component implementation.

Updates debug panel background styling from bg-components-panel-bg to bg-chatbot-bg
Replaces string concatenation with the cn utility function for better className handling
Modernizes JSX syntax by removing unnecessary closing tag

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
web/app/components/workflow/panel/debug-and-preview/index.tsx	Updates background color class for debug panel container
web/app/components/base/chat/chat/loading-anim/index.tsx	Improves className handling and JSX syntax

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

web/app/components/base/chat/chat/loading-anim/index.tsx

…s#24075)

* Restore useLabelStore mistakenly removed in commit 403e2d5 (langgenius#24052) Co-authored-by: Yongtao Huang <[email protected]> Co-authored-by: crazywoola <[email protected]> * chore: synchronize translations (langgenius#24044) * feat: add testcontainers based tests for metadata service (langgenius#24048) * feat: add testcontainers based tests for model loadbalancing service (langgenius#24066) * feat: add select input support to the conversation opener (langgenius#24043) * feat: add CLAUDE.md for LLM-assisted development guidance (langgenius#23946) * feat: add Redis SSL/TLS certificate authentication support (langgenius#23624) * Fix sticky table header transparency with backdrop-filter blur in dark mode (langgenius#23999) * fix: update first_id logic to use the oldest answer item in chat messages (langgenius#23992) Co-authored-by: Copilot <[email protected]> Co-authored-by: crazywoola <[email protected]> * refactor: improve loading animation and debug panel styles (langgenius#24075) * fix(oauth): redis compatibility (langgenius#23959) * feat: enchance prompt and code (langgenius#23633) Co-authored-by: stream <[email protected]> Co-authored-by: Stream <[email protected]> Co-authored-by: Stream <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix: return empty list instead of raising exception for qdrant search when score_threshold is 1 (langgenius#24032) * chore: translate i18n files (langgenius#24081) Co-authored-by: Stream29 <[email protected]> * fix: no current code caused code generation show error (langgenius#24086) * fix(ui): Optimize UI component styles and layouts (langgenius#24090) (langgenius#24092) * feat: no longer enable auto upgrade when marketplace is disabled (langgenius#24… (langgenius#24101) * Feature/improve goto anything commands (langgenius#24091) * chore: translate i18n files (langgenius#24102) Co-authored-by: crazywoola <[email protected]> * fix pg_vector extension requires SUPERUSER, but not available on Huawei Cloud RDS (langgenius#24093) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * Revert "fix pg_vector extension requires SUPERUSER, but not availabl… (langgenius#24108) * fix: validate checklist before publishing workflow (langgenius#24104) * Chore: remove some dead code in experience-enhance-group (langgenius#24110) Co-authored-by: Yongtao Huang <[email protected]> * fix: treat default template of code as empty (langgenius#24106) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * Bump pyobvector to 0.2.15 (langgenius#24120) * Use typing.Literal to replace str places (langgenius#24099) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * feat: add delete avatar functionality with confirmation modal (langgenius#24127) Co-authored-by: crazywoola <[email protected]> * chore: translate i18n files (langgenius#24131) Co-authored-by: crazywoola <[email protected]> * an example of suppress (langgenius#24136) * feat: add testcontainers based tests for feature service (langgenius#24026) * feat: Implements periodic deletion of workflow run logs that exceed t… (langgenius#23881) Co-authored-by: shiyun.li973792 <[email protected]> Co-authored-by: 1wangshu <[email protected]> Co-authored-by: Blackoutta <[email protected]> Co-authored-by: crazywoola <[email protected]> * try ast-grep (langgenius#24149) * fix: correct behaviour of code fix (langgenius#24152) Co-authored-by: Joel <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * Fix number input in tool configure form of agent node tool item (langgenius#24154) * Remove the second `if self.runtime is None:` check (langgenius#24171) Co-authored-by: Yongtao Huang <[email protected]> * Fix: correctly match http/https URLs in image upload file (langgenius#24180) * feat: add testcontainers based tests for model provider service (langgenius#24193) * Fix: replace `get_builtin_provider` with `get_plugin_provider` (langgenius#24191) * docs: format all md files (langgenius#24195) Signed-off-by: yihong0618 <[email protected]> * hotfix: fix multiple case match syntax (langgenius#24204) --------- Signed-off-by: yihong0618 <[email protected]> Co-authored-by: Yongtao Huang <[email protected]> Co-authored-by: Yongtao Huang <[email protected]> Co-authored-by: crazywoola <[email protected]> Co-authored-by: lyzno1 <[email protected]> Co-authored-by: NeatGuyCoding <[email protected]> Co-authored-by: Zhehao Peng <[email protected]> Co-authored-by: -LAN- <[email protected]> Co-authored-by: Guangdong Liu <[email protected]> Co-authored-by: Copilot <[email protected]> Co-authored-by: Wu Tianwei <[email protected]> Co-authored-by: Maries <[email protected]> Co-authored-by: Joel <[email protected]> Co-authored-by: stream <[email protected]> Co-authored-by: Stream <[email protected]> Co-authored-by: Stream <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Bo Wu <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Stream29 <[email protected]> Co-authored-by: HyaCinth <[email protected]> Co-authored-by: Junyan Qin (Chin) <[email protected]> Co-authored-by: GuanMu <[email protected]> Co-authored-by: Elvis_LEE <[email protected]> Co-authored-by: He Wang <[email protected]> Co-authored-by: crazywoola <[email protected]> Co-authored-by: 9527MrLi <[email protected]> Co-authored-by: shiyun.li973792 <[email protected]> Co-authored-by: 1wangshu <[email protected]> Co-authored-by: Blackoutta <[email protected]> Co-authored-by: KVOJJJin <[email protected]> Co-authored-by: yihong <[email protected]>

…s#24075)

…s#24075) (cherry picked from commit 218e247)

refactor: improve loading animation and debug panel styles

40a6646

dosubot bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Aug 18, 2025

WTW0313 requested a review from Copilot August 18, 2025 02:57

dosubot bot added the 💪 enhancement New feature or request label Aug 18, 2025

This comment was marked as outdated.

Sign in to view

style: enhance loading animation with new keyframes for improved visu…

28d609f

…al effects

dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Aug 18, 2025

WTW0313 marked this pull request as draft August 18, 2025 02:59

WTW0313 requested a review from Copilot August 18, 2025 03:00

This comment was marked as outdated.

Sign in to view

style: update loading animation with refined keyframes for enhanced v…

4f6560e

…isual effects

WTW0313 requested a review from Copilot August 18, 2025 03:10

Copilot AI reviewed Aug 18, 2025

View reviewed changes

web/app/components/base/chat/chat/loading-anim/index.tsx Show resolved Hide resolved

WTW0313 marked this pull request as ready for review August 18, 2025 03:11

dosubot bot added size:XS This PR changes 0-9 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Aug 18, 2025

crazywoola approved these changes Aug 18, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Aug 18, 2025

WTW0313 merged commit 218e247 into main Aug 18, 2025
9 checks passed

WTW0313 deleted the fix/preview-panel-bg branch August 18, 2025 03:12

bowenliang123 pushed a commit to bowenliang123/dify that referenced this pull request Aug 18, 2025

refactor: improve loading animation and debug panel styles (langgeniu…

10ee526

…s#24075)

qiqizjl pushed a commit to qiqizjl/dify that referenced this pull request Aug 27, 2025

refactor: improve loading animation and debug panel styles (langgeniu…

e18d0eb

…s#24075)

HarryReidx pushed a commit to HarryReidx/dify that referenced this pull request Sep 1, 2025

refactor: improve loading animation and debug panel styles (langgeniu…

3a001d8

…s#24075) (cherry picked from commit 218e247)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: improve loading animation and debug panel styles#24075

refactor: improve loading animation and debug panel styles#24075
WTW0313 merged 3 commits intomainfrom
fix/preview-panel-bg

WTW0313 commented Aug 18, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

WTW0313 commented Aug 18, 2025

Summary

Screenshots

Checklist

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants