refactor PageRedirectedAlert

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

@@ -3,57 +3,77 @@ import { useTranslation } from 'next-i18next';
 
 import { useCurrentPagePath, useRedirectFrom } from '~/states/page';
 
-export const PageRedirectedAlert = React.memo((): JSX.Element => {
-  const { t } = useTranslation();
-  const currentPagePath = useCurrentPagePath();
-  const redirectFrom = useRedirectFrom();
+type SubstanceProps = {
+  redirectFrom: string;
+};
 
-  const [isUnlinked, setIsUnlinked] = useState(false);
+const PageRedirectedAlertSubstance = React.memo(
+  (props: SubstanceProps): JSX.Element => {
+    const { t } = useTranslation();
+    const { redirectFrom } = props;
+    const currentPagePath = useCurrentPagePath();
 
-  const unlinkButtonClickHandler = useCallback(async () => {
-    if (currentPagePath == null) {
-      return;
-    }
-    try {
-      const unlink = (await import('~/client/services/page-operation')).unlink;
-      await unlink(currentPagePath);
-      setIsUnlinked(true);
-    } catch (err) {
-      const toastError = (await import('~/client/util/toastr')).toastError;
-      toastError(err);
-    }
-  }, [currentPagePath]);
+    const [isUnlinked, setIsUnlinked] = useState(false);
 
-  if (redirectFrom == null || redirectFrom === '') {
-    return <></>;
-  }
+    const unlinkButtonClickHandler = useCallback(async () => {
+      if (currentPagePath == null) {
+        return;
+      }
+      try {
+        const unlink = (
+          await import('~/client/services/page-operation')
+        ).unlink;
+        await unlink(currentPagePath);
+        setIsUnlinked(true);
+      } catch (err) {
+        const toastError = (await import('~/client/util/toastr')).toastError;
+        toastError(err);
+      }
+    }, [currentPagePath]);
+
+    if (isUnlinked) {
+      return (
+        <div className="alert alert-info d-edit-none py-3 px-4">
+          <strong>{t('Unlinked')}: </strong> {t('page_page.notice.unlinked')}
+        </div>
+      );
+    }
 
-  if (isUnlinked) {
     return (
-      <div className="alert alert-info d-edit-none py-3 px-4">
-        <strong>{t('Unlinked')}: </strong> {t('page_page.notice.unlinked')}
+      <div className="alert alert-pink d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
+        <span>
+          <strong>{t('Redirected')}:</strong>{' '}
+          {t('page_page.notice.redirected')} <code>{redirectFrom}</code>{' '}
+          {t('page_page.notice.redirected_period')}
+        </span>
+        <button
+          type="button"
+          id="unlink-page-button"
+          onClick={unlinkButtonClickHandler}
+          className="btn btn-outline-dark btn-sm float-end"
+        >
+          <span className="material-symbols-outlined" aria-hidden="true">
+            link_off
+          </span>
+          {t('unlink_redirection')}
+        </button>
       </div>
     );
+  },
+);
+PageRedirectedAlertSubstance.displayName = 'PageRedirectedAlertSubstance';
+
+export const PageRedirectedAlert = React.memo((): JSX.Element => {
+  const redirectFrom = useRedirectFrom();
+
+  // Lightweight condition check in Container
+  if (redirectFrom == null || redirectFrom === '') {
+    // biome-ignore lint/complexity/noUselessFragments: ignore
+    return <></>;
   }
 
-  return (
-    <div className="alert alert-pink d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
-      <span>
-        <strong>{t('Redirected')}:</strong> {t('page_page.notice.redirected')}{' '}
-        <code>{redirectFrom}</code> {t('page_page.notice.redirected_period')}
-      </span>
-      <button
-        type="button"
-        id="unlink-page-button"
-        onClick={unlinkButtonClickHandler}
-        className="btn btn-outline-dark btn-sm float-end"
-      >
-        <span className="material-symbols-outlined" aria-hidden="true">
-          link_off
-        </span>
-        {t('unlink_redirection')}
-      </button>
-    </div>
-  );
+  // Render Substance only when redirectFrom exists
+  // Dynamic imports will only be executed when the unlink button is clicked
+  return <PageRedirectedAlertSubstance redirectFrom={redirectFrom} />;
 });
 PageRedirectedAlert.displayName = 'PageRedirectedAlert';