chore: empty state revamp and loader improvement (#3448)

* chore: empty state asset added

* chore: empty state asset updated and image path helper function added

* chore: empty state asset updated

* chore: empty state asset updated and empty state details constant added

* chore: empty state component, helper function and comicbox button added

* chore: draft, archived and project issue empty state

* chore: cycle, module and issue layout empty state

* chore: analytics, dashboard, all issues, pages and project view empty state

* chore:projects empty state

* chore:projects empty state improvement

* chore: cycle, module, view and page loader improvement

* chore: code refactor

web/components/issues/issue-layouts/empty-states/archived-issues.tsx

@@ -0,0 +1,92 @@
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import size from "lodash/size";
+// hooks
+import { useIssues, useUser } from "hooks/store";
+// components
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+// constants
+import { EUserProjectRoles } from "constants/project";
+import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+// types
+import { IIssueFilterOptions } from "@plane/types";
+
+interface EmptyStateProps {
+  title: string;
+  image: string;
+  description?: string;
+  comicBox?: { title: string; description: string };
+  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
+  secondaryButton?: { text: string; onClick: () => void };
+  size?: "lg" | "sm" | undefined;
+  disabled?: boolean | undefined;
+}
+
+export const ProjectArchivedEmptyState: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  const {
+    membership: { currentProjectRole },
+    currentUser,
+  } = useUser();
+  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const userFilters = issuesFilter?.issueFilters?.filters;
+  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
+  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath(
+    "empty-filters",
+    activeLayout ?? "list",
+    currentUser?.theme.theme === "light"
+  );
+  const EmptyStateImagePath = getEmptyStateImagePath("archived", "empty-issues", currentUser?.theme.theme === "light");
+
+  const issueFilterCount = size(
+    Object.fromEntries(
+      Object.entries(userFilters ?? {}).filter(([key, value]) => value && Array.isArray(value) && value.length > 0)
+    )
+  );
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+    issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
+      ...newFilters,
+    });
+  };
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  const emptyStateProps: EmptyStateProps =
+    issueFilterCount > 0
+      ? {
+          title: "No issues found matching the filters applied",
+          image: currentLayoutEmptyStateImagePath,
+          secondaryButton: {
+            text: "Clear all filters",
+            onClick: handleClearAllFilters,
+          },
+        }
+      : {
+          title: "No archived issues yet",
+          description:
+            "Archived issues help you remove issues you completed or cancelled from focus. You can set automation to auto archive issues and find them here.",
+          image: EmptyStateImagePath,
+          primaryButton: {
+            text: "Set Automation",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`),
+          },
+          size: "sm",
+          disabled: !isEditingAllowed,
+        };
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <EmptyState {...emptyStateProps} />
+    </div>
+  );
+});

web/components/issues/issue-layouts/empty-states/draft-issues.tsx

@@ -0,0 +1,88 @@
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import size from "lodash/size";
+// hooks
+import { useIssues, useUser } from "hooks/store";
+// components
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+// constants
+import { EUserProjectRoles } from "constants/project";
+import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+// types
+import { IIssueFilterOptions } from "@plane/types";
+
+interface EmptyStateProps {
+  title: string;
+  image: string;
+  description?: string;
+  comicBox?: { title: string; description: string };
+  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
+  secondaryButton?: { text: string; onClick: () => void };
+  size?: "lg" | "sm" | undefined;
+  disabled?: boolean | undefined;
+}
+
+export const ProjectDraftEmptyState: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  const {
+    membership: { currentProjectRole },
+    currentUser,
+  } = useUser();
+  const { issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
+
+  const userFilters = issuesFilter?.issueFilters?.filters;
+  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
+  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath(
+    "empty-filters",
+    activeLayout ?? "list",
+    currentUser?.theme.theme === "light"
+  );
+  const EmptyStateImagePath = getEmptyStateImagePath("draft", "empty-issues", currentUser?.theme.theme === "light");
+
+  const issueFilterCount = size(
+    Object.fromEntries(
+      Object.entries(userFilters ?? {}).filter(([key, value]) => value && Array.isArray(value) && value.length > 0)
+    )
+  );
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+    issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
+      ...newFilters,
+    });
+  };
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  const emptyStateProps: EmptyStateProps =
+    issueFilterCount > 0
+      ? {
+          title: "No issues found matching the filters applied",
+          image: currentLayoutEmptyStateImagePath,
+          secondaryButton: {
+            text: "Clear all filters",
+            onClick: handleClearAllFilters,
+          },
+        }
+      : {
+          title: "No draft issues yet",
+          description:
+            "Quickly stepping away but want to keep your place? No worries – save a draft now. Your issues will be right here waiting for you.",
+          image: EmptyStateImagePath,
+          size: "sm",
+          disabled: !isEditingAllowed,
+        };
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <EmptyState {...emptyStateProps} />
+    </div>
+  );
+});

web/components/issues/issue-layouts/empty-states/index.ts

@@ -2,4 +2,6 @@ export * from "./cycle";
 export * from "./global-view";
 export * from "./module";
 export * from "./project-view";
-export * from "./project";
+export * from "./project-issues";
+export * from "./draft-issues";
+export * from "./archived-issues";

web/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -0,0 +1,106 @@
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import size from "lodash/size";
+// hooks
+import { useApplication, useIssues, useUser } from "hooks/store";
+// components
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+// constants
+import { EUserProjectRoles } from "constants/project";
+import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+// types
+import { IIssueFilterOptions } from "@plane/types";
+
+interface EmptyStateProps {
+  title: string;
+  image: string;
+  description?: string;
+  comicBox?: { title: string; description: string };
+  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
+  secondaryButton?: { text: string; onClick: () => void };
+  size?: "lg" | "sm" | undefined;
+  disabled?: boolean | undefined;
+}
+
+export const ProjectEmptyState: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store hooks
+  const {
+    commandPalette: commandPaletteStore,
+    eventTracker: { setTrackElement },
+  } = useApplication();
+  const {
+    membership: { currentProjectRole },
+    currentUser,
+  } = useUser();
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const userFilters = issuesFilter?.issueFilters?.filters;
+  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
+  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath(
+    "empty-filters",
+    activeLayout ?? "list",
+    currentUser?.theme.theme === "light"
+  );
+  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "issues", currentUser?.theme.theme === "light");
+
+  const issueFilterCount = size(
+    Object.fromEntries(
+      Object.entries(userFilters ?? {}).filter(([key, value]) => value && Array.isArray(value) && value.length > 0)
+    )
+  );
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+    issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
+      ...newFilters,
+    });
+  };
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  const emptyStateProps: EmptyStateProps =
+    issueFilterCount > 0
+      ? {
+          title: "No issues found matching the filters applied",
+          image: currentLayoutEmptyStateImagePath,
+          secondaryButton: {
+            text: "Clear all filters",
+            onClick: handleClearAllFilters,
+          },
+        }
+      : {
+          title: "Create an issue and assign it to someone, even yourself",
+          description:
+            "Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal.",
+          image: EmptyStateImagePath,
+          comicBox: {
+            title: "Issues are building blocks in Plane.",
+            description:
+              "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
+          },
+          primaryButton: {
+            text: "Create your first issue",
+
+            onClick: () => {
+              setTrackElement("PROJECT_EMPTY_STATE");
+              commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+            },
+          },
+          size: "lg",
+          disabled: !isEditingAllowed,
+        };
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <EmptyState {...emptyStateProps} />
+    </div>
+  );
+});

web/components/issues/issue-layouts/empty-states/project.tsx

@@ -1,49 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { PlusIcon } from "lucide-react";
-// hooks
-import { useApplication, useUser } from "hooks/store";
-// components
-import { NewEmptyState } from "components/common/new-empty-state";
-// constants
-import { EUserProjectRoles } from "constants/project";
-// assets
-import emptyIssue from "public/empty-state/empty_issues.webp";
-import { EIssuesStoreType } from "constants/issue";
-
-export const ProjectEmptyState: React.FC = observer(() => {
-  // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  return (
-    <div className="grid h-full w-full place-items-center">
-      <NewEmptyState
-        title="Create an issue and assign it to someone, even yourself"
-        description="Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal."
-        image={emptyIssue}
-        comicBox={{
-          title: "Issues are building blocks in Plane.",
-          direction: "left",
-          description:
-            "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
-        }}
-        primaryButton={{
-          text: "Create your first issue",
-          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-          onClick: () => {
-            setTrackElement("PROJECT_EMPTY_STATE");
-            commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-          },
-        }}
-        disabled={!isEditingAllowed}
-      />
-    </div>
-  );
-});

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -3,19 +3,22 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // hooks
-import { useGlobalView, useIssues, useUser } from "hooks/store";
+import { useApplication, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
 import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
 // components
 import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
 import { SpreadsheetView } from "components/issues/issue-layouts";
 import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
 import { Spinner } from "@plane/ui";
 // types
 import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
 import { EIssueActions } from "../types";
+// constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { ALL_ISSUES_EMPTY_STATE_DETAILS, EUserWorkspaceRoles } from "constants/workspace";
 
 export const AllIssueLayoutRoot: React.FC = observer(() => {
   // router
@@ -24,6 +27,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
   //swr hook for fetching issue properties
   useWorskspaceIssueProperties(workspaceSlug);
   // store
+  const { commandPalette: commandPaletteStore } = useApplication();
   const {
     issuesFilter: { filters, fetchFilters, updateFilters },
     issues: { loader, groupedIssueIds, fetchIssues, updateIssue, removeIssue },
@@ -31,10 +35,17 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const { dataViewId, issueIds } = groupedIssueIds;
   const {
-    membership: { currentWorkspaceAllProjectsRole },
+    membership: { currentWorkspaceAllProjectsRole, currentWorkspaceRole },
+    currentUser,
   } = useUser();
   const { fetchAllGlobalViews } = useGlobalView();
-  // derived values
+  const { workspaceProjectIds } = useProject();
+
+  const isDefaultView = ["all-issues", "assigned", "created", "subscribed"].includes(groupedIssueIds.dataViewId);
+  const currentView = isDefaultView ? groupedIssueIds.dataViewId : "custom-view";
+  const currentViewDetails = ALL_ISSUES_EMPTY_STATE_DETAILS[currentView as keyof typeof ALL_ISSUES_EMPTY_STATE_DETAILS];
+
+  const emptyStateImage = getEmptyStateImagePath("all-issues", currentView, currentUser?.theme.theme === "light");
 
   useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
     if (workspaceSlug) {
@@ -116,6 +127,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     [handleIssues]
   );
 
+  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       {!globalViewId || globalViewId !== dataViewId || loader === "init-loader" || !issueIds ? (
@@ -127,7 +140,28 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
           <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
 
           {(issueIds ?? {}).length == 0 ? (
-            <>{/* <GlobalViewEmptyState /> */}</>
+            <EmptyState
+              image={emptyStateImage}
+              title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
+              description={
+                (workspaceProjectIds ?? []).length > 0
+                  ? currentViewDetails.description
+                  : "To create issues or manage your work, you need to create a project or be a part of one."
+              }
+              size="sm"
+              primaryButton={
+                (workspaceProjectIds ?? []).length > 0
+                  ? {
+                      text: "Create new issue",
+                      onClick: () => commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT),
+                    }
+                  : {
+                      text: "Start your first project",
+                      onClick: () => commandPaletteStore.toggleCreateProjectModal(true),
+                    }
+              }
+              disabled={!isEditingAllowed}
+            />
           ) : (
             <div className="relative h-full w-full overflow-auto">
               <SpreadsheetView

web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx

@@ -8,7 +8,7 @@ import { useIssues } from "hooks/store";
 import {
   ArchivedIssueListLayout,
   ArchivedIssueAppliedFiltersRoot,
-  ProjectEmptyState,
+  ProjectArchivedEmptyState,
   IssuePeekOverview,
 } from "components/issues";
 import { EIssuesStoreType } from "constants/issue";
@@ -48,8 +48,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
       ) : (
         <>
           {!issues?.groupedIssueIds ? (
-            // TODO: Replace this with project view empty state
-            <ProjectEmptyState />
+            <ProjectArchivedEmptyState />
           ) : (
             <>
               <div className="relative h-full w-full overflow-auto">

web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx

@@ -7,7 +7,7 @@ import { useIssues } from "hooks/store";
 // components
 import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
 import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
-import { ProjectEmptyState } from "../empty-states";
+import { ProjectDraftEmptyState } from "../empty-states";
 // ui
 import { Spinner } from "@plane/ui";
 import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
@@ -49,8 +49,7 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
       ) : (
         <>
           {!issues?.groupedIssueIds ? (
-            // TODO: Replace this with project view empty state
-            <ProjectEmptyState />
+            <ProjectDraftEmptyState />
           ) : (
             <div className="relative h-full w-full overflow-auto">
               {activeLayout === "list" ? (