UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: новый канон внешних контуров и стандартизация свойств

plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx

@@ -7,12 +7,12 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { ExternalContoursEmptyState } from "./empty-state";
 import { ExternalContoursListItem } from "./list-item";
 
 type Props = {
@@ -31,7 +31,8 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
   const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
   const router = useAppRouter();
   const { t } = useTranslation();
-  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds } = useProjectExternalContours();
+  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
+    useProjectExternalContours();
 
   useEffect(() => {
     if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
@@ -79,8 +80,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
         </div>
 
         <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
-          {filteredRequestIds.length > 0 ? (
-            <div className="space-y-3">
+          {loader === "init-loading" ? (
+            <div className="flex h-full items-center justify-center">
+              <div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
+                {t("loading")}...
+              </div>
+            </div>
+          ) : filteredRequestIds.length > 0 ? (
+            <div className="space-y-4">
               {filteredRequestIds.map((requestId) => (
                 <ExternalContoursListItem
                   key={requestId}
@@ -93,23 +100,18 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
             </div>
           ) : (
             <div className="flex h-full w-full items-center justify-center">
-              {currentTab === EInboxIssueCurrentTab.OPEN ? (
-                <EmptyStateDetailed
-                  assetKey="inbox"
-                  title={t("external_contours_page.empty_state.open_title")}
-                  description={t("external_contours_page.empty_state.open_description")}
-                  assetClassName="size-20"
-                  rootClassName="px-page-x"
-                />
-              ) : (
-                <EmptyStateDetailed
-                  assetKey="inbox"
-                  title={t("external_contours_page.empty_state.closed_title")}
-                  description={t("external_contours_page.empty_state.closed_description")}
-                  assetClassName="size-20"
-                  className="px-10"
-                />
-              )}
+              <ExternalContoursEmptyState
+                title={t(
+                  currentTab === EInboxIssueCurrentTab.OPEN
+                    ? "external_contours_page.empty_state.open_title"
+                    : "external_contours_page.empty_state.closed_title"
+                )}
+                description={t(
+                  currentTab === EInboxIssueCurrentTab.OPEN
+                    ? "external_contours_page.empty_state.open_description"
+                    : "external_contours_page.empty_state.closed_description"
+                )}
+              />
             </div>
           )}
         </div>