ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: стабилизация read-only фильтров двусторонней доски внешних контуров

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

@@ -11,6 +11,7 @@ import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
 import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { ExternalContoursBoardFiltersRow } from "./board-filters-row";
 import { ExternalContoursBoardColumn } from "./board-column";
 
 type Props = {
@@ -27,7 +28,7 @@ export const ExternalContoursBoardRoot = observer(function ExternalContoursBoard
   const { projectId, workspaceSlug } = props;
   const { t } = useTranslation();
   const router = useAppRouter();
-  const { currentTab, loader, tabCountMap, handleCurrentTab } = useProjectExternalContoursBoard();
+  const { currentTab, hasAnyItems, isFiltering, loader, tabCountMap, handleCurrentTab } = useProjectExternalContoursBoard();
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden px-8 pb-6">
@@ -62,22 +63,34 @@ export const ExternalContoursBoardRoot = observer(function ExternalContoursBoard
         </div>
       </div>
 
-      {loader === "init-loading" ? (
+      <div className="shrink-0 pb-4">
+        <ExternalContoursBoardFiltersRow workspaceSlug={workspaceSlug} projectId={projectId} />
+      </div>
+
+      {loader === "init-loading" && !hasAnyItems ? (
         <div className="flex flex-1 items-center justify-center text-13 text-secondary">{t("loading")}...</div>
       ) : (
-        <div className="grid min-h-0 flex-1 grid-cols-1 gap-5 xl:grid-cols-2">
-          <ExternalContoursBoardColumn
-            currentTab={currentTab}
-            direction="outgoing"
-            projectId={projectId}
-            workspaceSlug={workspaceSlug}
-          />
-          <ExternalContoursBoardColumn
-            currentTab={currentTab}
-            direction="incoming"
-            projectId={projectId}
-            workspaceSlug={workspaceSlug}
-          />
+        <div className="relative min-h-0 flex-1">
+          {isFiltering && (
+            <div className="pointer-events-none absolute top-0 right-0 z-10 rounded-full bg-black/35 px-3 py-1 text-11 font-medium text-secondary backdrop-blur-sm">
+              {t("updating")}...
+            </div>
+          )}
+
+          <div className={cn("grid min-h-0 h-full grid-cols-1 gap-5 transition-opacity xl:grid-cols-2", { "opacity-60": isFiltering })}>
+            <ExternalContoursBoardColumn
+              currentTab={currentTab}
+              direction="outgoing"
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+            <ExternalContoursBoardColumn
+              currentTab={currentTab}
+              direction="incoming"
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          </div>
         </div>
       )}
     </div>