chore(animated-header): Handling of loading and disabled states #588
Conversation
This file contains hidden or 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
❌ Deploy Preview for carbon-labs-web-components failed. Why did it fail? →
|
✅ Deploy Preview for carbon-labs-react ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
IronZDev
requested review from
makafsal and
amal-k-joy
and removed request for
a team
amal-k-joy
requested changes
Jun 6, 2025
There was a problem hiding this comment.
Looks good. Added 2 minor comments.
Points to consider later:
- Usage of Lottie-web animation is not recomended on component level. Many issues was reported on inflated bundle size and issue in next js application.
- Currently you have followed an approach where whole capabilities are passed via single configuration. I think this would make the usage bit complicated. Instead you can think of a composite approach or composite approach with compound component pattern in react.
Current
<AnimatedHeader {...argsWithSelectors} />
Proposed
<AnimatedHeader {...config} heading ... >
<AnimatedHeaderTaskController description>
<TaskControllerButton></TaskControllerButton>
or
<TaskControllerDropDown></TaskControllerDropDown>
</AnimatedHeaderTaskController>
<AnimatedHeaderWorkspaceSelector isLoading config />
<AnimatedHeaderMainContent>
<AnimatedHeaderTile></AnimatedHeaderTile>
<AnimatedHeaderTile></AnimatedHeaderTile>
<AnimatedHeaderAIChat></AnimatedHeaderTile>
</AnimatedHeaderMainContent>
</AnimatedHeader>
| @@ -226,6 +226,18 @@ body { | |||
| max-inline-size: fit-content; | |||
| } | |||
|
|
|||
| .#{$prefix}__task-controller-skeleton { | |||
There was a problem hiding this comment.
can you use carbon tokens for spacings across the style file?
| } | ||
|
|
||
| if (tasksControllerConfig?.type === 'dropdown' && dropdownProps) { | ||
| console.log(dropdownProps); |
Thanks for the comments! |
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.
Significant refactor of Animated Header. I grouped and cleaned up some props.
I added handling for full component loading state + tasks or selectors loading states.
Changelog
New
Changed
Testing / Reviewing
Screen.Recording.2025-05-08.at.23.07.50.mov