[WEB-3176] chore: workspace view loading state improvement #6423
Conversation
|
Pull Request Linked with Plane Issues Comment Automatically Generated by Plane |
1 similar comment
|
Pull Request Linked with Plane Issues Comment Automatically Generated by Plane |
WalkthroughThe pull request introduces loading state management across multiple components in the workspace views and issues layout. A new Changes
Sequence DiagramsequenceDiagram
participant Page as GlobalViewIssuesPage
participant Filters as GlobalViewsAppliedFiltersRoot
participant Layout as AllIssueLayoutRoot
Page->>Page: Initialize isLoading(false)
Page->>Filters: Pass isLoading
Page->>Layout: Pass isLoading, toggleLoading
Layout-->>Page: Toggle loading state
alt Loading
Filters->>Filters: Render Loader
Layout->>Layout: Show Loading Indicator
else Not Loading
Filters->>Filters: Render Applied Filters
Layout->>Layout: Render Normal Content
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
🔭 Outside diff range comments (1)
web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx (1)
Line range hint
107-124: Potential race condition in loading state managementThe loading state toggle doesn't account for error cases, which could leave the UI in a perpetual loading state if the fetch fails.
Consider wrapping the loading state management in a try-finally block:
const { isLoading: issuesLoading } = useSWR( workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null, async () => { if (workspaceSlug && globalViewId) { clear(); toggleLoading(true); + try { await fetchFilters(workspaceSlug.toString(), globalViewId.toString()); await fetchIssues( workspaceSlug.toString(), globalViewId.toString(), groupedIssueIds ? "mutation" : "init-loader", { canGroup: false, perPageCount: 100, } ); routerFilterParams(); + } finally { toggleLoading(false); + } } }, { revalidateIfStale: false, revalidateOnFocus: false } );
🧹 Nitpick comments (5)
web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx (2)
20-21: Consider initializing loading state to trueSince data fetching starts immediately, initializing
isLoadingtotruewould prevent a flash of unloaded content.- const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true);
27-28: Props drilling could be improved with React ContextThe loading state is being passed down through multiple levels of components. Consider using React Context for better state management if this pattern expands further.
Also applies to: 35-38
web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx (1)
Line range hint
178-191: Improve loading state condition readabilityThe loading condition is complex and could be simplified for better maintainability.
- if (!isLoading && !globalViewsLoading && !issuesLoading && !viewDetails && !isDefaultView) { + const isLoadingComplete = !isLoading && !globalViewsLoading && !issuesLoading; + const isViewInvalid = !viewDetails && !isDefaultView; + if (isLoadingComplete && isViewInvalid) {web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx (2)
158-164: Extract loader dimensions to constantsThe hardcoded loader dimensions could be moved to constants for better maintainability.
+ const LOADER_DIMENSIONS = { + SMALL: { height: "36px", width: "100px" }, + MEDIUM: { height: "36px", width: "150px" }, + LARGE: { height: "36px", width: "300px" }, + }; {isLoading ? ( <Loader className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto"> - <Loader.Item height="36px" width="150px" /> - <Loader.Item height="36px" width="100px" /> - <Loader.Item height="36px" width="300px" /> + <Loader.Item {...LOADER_DIMENSIONS.MEDIUM} /> + <Loader.Item {...LOADER_DIMENSIONS.SMALL} /> + <Loader.Item {...LOADER_DIMENSIONS.LARGE} /> </Loader> ) : (
165-173: Consider adding a fade transitionThe abrupt switch between loader and content could be smoothed out with a transition.
+ const fadeTransitionClass = "transition-opacity duration-200"; {isLoading ? ( - <Loader className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto"> + <Loader className={`flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto ${fadeTransitionClass}`}> ... </Loader> ) : ( <AppliedFiltersList - labels={workspaceLabels ?? undefined} + className={fadeTransitionClass} + labels={workspaceLabels ?? undefined} ... /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx(2 hunks)web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx(3 hunks)web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: lint-web
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
Description
This PR includes improvement for workspace view loading.
Type of Change
References
[WEB-3176]
Summary by CodeRabbit
Release Notes
New Features
Improvements
The updates provide a more responsive interface by introducing loading state tracking and display mechanisms across global view and issue-related components.