binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: workspace view loading state improvement (#6423)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-01-17 19:50:56 +05:30 • committed by GitHub
parent 9addcde553
commit 13cc8b0e96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
View file

@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// components
@ -16,19 +17,25 @@ const GlobalViewIssuesPage = observer(() => {
const { globalViewId } = useParams();
// store hooks
const { currentWorkspace } = useWorkspace();
// states
const [isLoading, setIsLoading] = useState(false);
// derived values
const defaultView = DEFAULT_GLOBAL_VIEWS_LIST.find((view) => view.key === globalViewId);
const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - All Views` : undefined;
// handlers
const toggleLoading = (value: boolean) => setIsLoading(value);
return (
<>
<PageHead title={pageTitle} />
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="flex h-full w-full flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
{globalViewId && <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId.toString()} />}
<AllIssueLayoutRoot isDefaultView={!!defaultView} />
{globalViewId && (
<GlobalViewsAppliedFiltersRoot globalViewId={globalViewId.toString()} isLoading={isLoading} />
)}
<AllIssueLayoutRoot isDefaultView={!!defaultView} isLoading={isLoading} toggleLoading={toggleLoading} />
</div>
</div>
</>

29
web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View file

@ -10,7 +10,7 @@ import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
//ui
// components
import { Header, EHeaderVariant } from "@plane/ui";
import { Header, EHeaderVariant, Loader } from "@plane/ui";
import { AppliedFiltersList } from "@/components/issues";
import { UpdateViewComponent } from "@/components/views/update-view-component";
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
@ -27,10 +27,11 @@ import { getAreFiltersEqual } from "../../../utils";
type Props = {
globalViewId: string;
isLoading?: boolean;
};
export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
const { globalViewId } = props;
const { globalViewId, isLoading = false } = props;
// router
const { workspaceSlug } = useParams();
// store hooks
@ -154,14 +155,22 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
}}
/>
<AppliedFiltersList
labels={workspaceLabels ?? undefined}
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
disableEditing={isLocked}
alwaysAllowEditing
/>
{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>
) : (
<AppliedFiltersList
labels={workspaceLabels ?? undefined}
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
disableEditing={isLocked}
alwaysAllowEditing
/>
)}
{!isDefaultView ? (
<UpdateViewComponent

14
web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View file

@ -29,10 +29,12 @@ import { TRenderQuickActions } from "../list/list-view-types";
type Props = {
isDefaultView: boolean;
isLoading?: boolean;
toggleLoading: (value: boolean) => void;
};
export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
const { isDefaultView } = props;
const { isDefaultView, isLoading = false, toggleLoading } = props;
// router
const { workspaceSlug, globalViewId } = useParams();
const router = useAppRouter();
@ -92,7 +94,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
if (workspaceSlug && globalViewId) fetchNextIssues(workspaceSlug.toString(), globalViewId.toString());
}, [fetchNextIssues, workspaceSlug, globalViewId]);
const { isLoading } = useSWR(
const { isLoading: globalViewsLoading } = useSWR(
workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS_${workspaceSlug}` : null,
async () => {
if (workspaceSlug) {
@ -102,11 +104,12 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
{ revalidateIfStale: false, revalidateOnFocus: false }
);
useSWR(
const { isLoading: issuesLoading } = useSWR(
workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null,
async () => {
if (workspaceSlug && globalViewId) {
clear();
toggleLoading(true);
await fetchFilters(workspaceSlug.toString(), globalViewId.toString());
await fetchIssues(
workspaceSlug.toString(),
@ -118,6 +121,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
}
);
routerFilterParams();
toggleLoading(false);
}
},
{ revalidateIfStale: false, revalidateOnFocus: false }
@ -171,7 +175,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
);
// when the call is not loading and the view does not exist and the view is not a default view, show empty state
if (!isLoading && !viewDetails && !isDefaultView) {
if (!isLoading && !globalViewsLoading && !issuesLoading && !viewDetails && !isDefaultView) {
return (
<EmptyState
image={emptyView}
@ -185,7 +189,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
);
}
if (getIssueLoader() === "init-loader" || !globalViewId || !groupedIssueIds) {
if ((isLoading && issuesLoading && getIssueLoader() === "init-loader") || !globalViewId || !groupedIssueIds) {
return <SpreadsheetLayoutLoader />;
}