refactor FullTextSearchNotCoverAlert

apps/app/src/components/PageView/PageAlerts/FullTextSearchNotCoverAlert/FullTextSearchNotCoverAlert.tsx

@@ -2,24 +2,18 @@ import type { JSX } from 'react';
 import { useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
-import { useCurrentPageData } from '~/states/page';
 import { elasticsearchMaxBodyLengthToIndexAtom } from '~/states/server-configurations';
 
-export const FullTextSearchNotCoverAlert = (): JSX.Element => {
-  const { t } = useTranslation();
-
-  const elasticsearchMaxBodyLengthToIndex = useAtomValue(
-    elasticsearchMaxBodyLengthToIndexAtom,
-  );
-  const data = useCurrentPageData();
+export type FullTextSearchNotCoverAlertProps = {
+  isActive: boolean;
+};
 
-  const markdownLength = data?.revision?.body?.length;
+export const FullTextSearchNotCoverAlert = ({ isActive }: FullTextSearchNotCoverAlertProps): JSX.Element => {
+  const { t } = useTranslation();
+  const elasticsearchMaxBodyLengthToIndex = useAtomValue(elasticsearchMaxBodyLengthToIndexAtom);
 
-  if (
-    markdownLength == null ||
-    elasticsearchMaxBodyLengthToIndex == null ||
-    markdownLength <= elasticsearchMaxBodyLengthToIndex
-  ) {
+  // Display condition is controlled by the isActive prop from dynamic.tsx
+  if (!isActive) {
     // biome-ignore lint/complexity/noUselessFragments: ignore
     return <></>;
   }

apps/app/src/components/PageView/PageAlerts/FullTextSearchNotCoverAlert/dynamic.tsx

@@ -5,20 +5,37 @@ import { useLazyLoader } from '~/client/util/use-lazy-loader';
 import { useCurrentPageData } from '~/states/page';
 import { elasticsearchMaxBodyLengthToIndexAtom } from '~/states/server-configurations';
 
+import type { FullTextSearchNotCoverAlertProps } from './FullTextSearchNotCoverAlert';
+
 export const FullTextSearchNotCoverAlertLazyLoaded = (): JSX.Element => {
   const pageData = useCurrentPageData();
-  const elasticsearchMaxBodyLengthToIndex = useAtomValue(elasticsearchMaxBodyLengthToIndexAtom);
+  const elasticsearchMaxBodyLengthToIndex = useAtomValue(
+    elasticsearchMaxBodyLengthToIndexAtom,
+  );
 
   const markdownLength = pageData?.revision?.body?.length;
-  const isActive = markdownLength != null
-    && elasticsearchMaxBodyLengthToIndex != null
-    && markdownLength > elasticsearchMaxBodyLengthToIndex;
 
-  const FullTextSearchNotCoverAlert = useLazyLoader<Record<string, unknown>>(
-    'full-text-search-not-cover-alert',
-    () => import('./FullTextSearchNotCoverAlert').then((mod) => ({ default: mod.FullTextSearchNotCoverAlert })),
-    isActive,
-  );
+  // Calculate whether the alert should be shown
+  const shouldShow =
+    markdownLength != null &&
+    elasticsearchMaxBodyLengthToIndex != null &&
+    markdownLength > elasticsearchMaxBodyLengthToIndex;
 
-  return FullTextSearchNotCoverAlert ? <FullTextSearchNotCoverAlert /> : <></>;
+  // Load component when it should be shown (loads once and stays cached)
+  const FullTextSearchNotCoverAlert =
+    useLazyLoader<FullTextSearchNotCoverAlertProps>(
+      'full-text-search-not-cover-alert',
+      () =>
+        import('./FullTextSearchNotCoverAlert').then((mod) => ({
+          default: mod.FullTextSearchNotCoverAlert,
+        })),
+      shouldShow,
+    );
+
+  // Pass active state to control visibility
+  return FullTextSearchNotCoverAlert ? (
+    <FullTextSearchNotCoverAlert isActive={shouldShow} />
+  ) : (
+    <></>
+  );
 };