loader color fix

[gurinder39]

Summary by CodeRabbit

• New Feature: Enhanced the visual consistency of the Dashboard Loading component. The color of the loading indicator now adapts to the selected theme, providing a more integrated user experience across different themes.

Summary by CodeRabbit

• Refactor
  • Enhanced the DashboardLoading component to adapt its visual elements to the selected theme using useTheme2.

[github-actions]

CodeRabbit

Walkthrough

The changeset introduces a new import statement for the useTheme2 function from the @grafana/ui package in the FnLoader.tsx file. This function is used to dynamically set the color of the CircularProgress component based on the current theme, enhancing the visual consistency across different themes.

Changes

File	Summary
public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx	Introduced useTheme2 to dynamically adjust the color of the CircularProgress component according to the current theme.

🐇💻

In the land of code where the shadows lie,
A rabbit hopped and caught the eye.
With a theme switch here and a color there,
He made the loader fair and square.
Now it shines with colors bright,
In the day and in the night.
So let's celebrate this change so neat,
With a carrot cake, oh so sweet! 🥕🍰

---

Uplevel your code reviews with CodeRabbit Pro

CodeRabbit Pro

If you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

[github-actions]

CodeRabbit

Commits

Files that changed from the base of the PR and between afbf8e1 and 24e1aa8 commits.

Files selected (1)

• public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx (2)

Files skipped from review due to trivial changes (1)

• public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx

Review comments generated (0)

• Review: 0
• LGTM: 0

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
• Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

• The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
• You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

• Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.

[coderabbitai]

Warning

CodeRabbit GitHub Action Detected

The repository is using both CodeRabbit Pro and CodeRabbit Open Source (via GitHub Actions), which is not recommended as it may lead to duplicate comments and extra noise. Please remove the CodeRabbit GitHub Action.

Walkthrough

The FnLoader component within a dashboard feature has been updated to integrate theme responsiveness. A new import, useTheme2, is now used to adapt the CircularProgress component's color to match the current theme, enhancing the visual consistency across different theme settings.

Changes

File Path	Change Summary
.../dashboard/components/DashboardLoading/FnLoader.tsx	Added useTheme2 import and updated CircularProgress color to use theme.

Poem

In the code where themes intertwine,
A rabbit hopped, making colors align.
With a theme hook in hand, so spry,
The loader spins, under a coder's sky. 🌈🐰

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• You can reply to a review comment from CodeRabbit.
• You can also chat with CodeRabbit bot directly around the specific lines of code or files in the PR by tagging @coderabbitai in a new comment.
• You can tag @coderabbitai in a PR comment and ask questions about the PR and the codebase.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 562b80f and ef49896.

Files selected for processing (1)

• public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx (2 hunks)

Additional comments: 4

public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx (4)

• 4-4: The import of useTheme2 is correctly added to use the theme within the FnLoader component.

• 23-42: The ThemeRichColor interface indeed contains a main property, as shown in the output from the types.ts file. This confirms that the access pattern theme.colors.primary.main used in the FnLoader.tsx file is correct, as the primary property of the theme colors is of type ThemeRichColor, which includes a main string property.

Based on this information, the usage of theme.colors.primary.main in the FnLoader.tsx file is verified to be consistent with the theme object structure provided by useTheme2.

Analysis chain

Ensure that theme.colors.primary.main is the correct way to access the primary color in the theme object provided by useTheme2. If the theme structure is different, this could result in an undefined value and cause styling issues.

---

---

---

---

---

---

---

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Verify that the theme object has a `colors.primary.main` property.
ast-grep --lang typescript --pattern $'{
  colors: {
    primary: {
      main: $_
    }
  }
}'

Length of output: 96

---

---

Script:

#!/bin/bash
# Find the usage of `useTheme2` to determine the type of the theme object it returns.
ast-grep --lang typescript --pattern $'useTheme2()'

Length of output: 249

---

---

Script:

#!/bin/bash
# Search for the type or interface definition related to `useTheme2`.
rg --type-add 'ts:*.ts' --type-add 'tsx:*.tsx' --type 'ts' --type 'tsx' 'interface Theme' 'type Theme'

Length of output: 151

---

---

Script:

#!/bin/bash
# Correctly search for the pattern 'interface Theme' or 'type Theme' within TypeScript and TSX files.
rg --type-add 'ts:*.ts' --type-add 'tsx:*.tsx' -g '*.ts' -g '*.tsx' '(interface Theme|type Theme)'

Length of output: 2832

---

---

Script:

#!/bin/bash
# Extract the content of the ThemeColors interface from the createColors.ts file.
rg --type-add 'ts:*.ts' --type 'ts' 'interface ThemeColors' -A 20 'packages/grafana-data/src/themes/createColors.ts'

Length of output: 1278

---

---

Script:

#!/bin/bash
# Extract the content of the ThemeRichColor interface from the createColors.ts file.
rg --type-add 'ts:*.ts' --type 'ts' 'interface ThemeRichColor' -A 10 'packages/grafana-data/src/themes/createColors.ts'

Length of output: 117

---

---

Script:

#!/bin/bash
# Search for the definition of ThemeRichColor within the themes directory.
rg --type-add 'ts:*.ts' --type 'ts' 'ThemeRichColor' 'packages/grafana-data/src/themes/'

Length of output: 1799

---

---

Script:

#!/bin/bash
# Extract the content of the ThemeRichColor interface from the types.ts file.
rg --type-add 'ts:*.ts' --type 'ts' 'interface ThemeRichColor' -A 10 'packages/grafana-data/src/themes/types.ts'

Length of output: 381

* 36-44: The `circularProgressProps` are correctly spread into the `CircularProgress` component, allowing for customization of the component's props from the parent component.

• 47-47: The conditional rendering for text is a good practice, ensuring that if text is a string, it is wrapped in a Typography component for consistent styling, otherwise, it is rendered as is or not rendered at all if it's nullish.