diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
index 3eec4b02764..b75ff3ab179 100644
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
@@ -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 (
<>
- {globalViewId &&
}
-
+ {globalViewId && (
+
+ )}
+
>
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index c0a5cc1d39e..7744d48c868 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -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) => {
}}
/>
-
+ {isLoading ? (
+
+
+
+
+
+ ) : (
+
+ )}
{!isDefaultView ? (
void;
};
export const AllIssueLayoutRoot: React.FC = 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 = 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 = 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 = observer((props: Props) => {
}
);
routerFilterParams();
+ toggleLoading(false);
}
},
{ revalidateIfStale: false, revalidateOnFocus: false }
@@ -171,7 +175,7 @@ export const AllIssueLayoutRoot: React.FC = 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 (
= observer((props: Props) => {
);
}
- if (getIssueLoader() === "init-loader" || !globalViewId || !groupedIssueIds) {
+ if ((isLoading && issuesLoading && getIssueLoader() === "init-loader") || !globalViewId || !groupedIssueIds) {
return ;
}