From 38784b9d73c64254b29a7d50a529fe90b8743436 Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Mon, 29 Jul 2024 22:41:32 +0800
Subject: [PATCH] fix: demond load outline

---
 .../components/global-comment/AddComment.tsx  | 16 ++--
 .../global-comment/actions/MoreActions.tsx    | 42 ++++++-----
 .../components/publish/header/MoreActions.tsx | 74 ++++++++++---------
 .../publish/header/PublishViewHeader.tsx      |  2 +-
 4 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx b/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx
index 90efdd393b..e70ad41a0b 100644
--- a/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx
+++ b/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx
@@ -167,13 +167,15 @@ function AddComment() {
           </Button>
         </div>
       )}
-      <LoginModal
-        redirectTo={url}
-        open={loginOpen}
-        onClose={() => {
-          setLoginOpen(false);
-        }}
-      />
+      {loginOpen && (
+        <LoginModal
+          redirectTo={url}
+          open={loginOpen}
+          onClose={() => {
+            setLoginOpen(false);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/global-comment/actions/MoreActions.tsx b/frontend/appflowy_web_app/src/components/global-comment/actions/MoreActions.tsx
index 1a5bc46038..e699f3ae56 100644
--- a/frontend/appflowy_web_app/src/components/global-comment/actions/MoreActions.tsx
+++ b/frontend/appflowy_web_app/src/components/global-comment/actions/MoreActions.tsx
@@ -125,26 +125,28 @@ function MoreActions({ comment }: { comment: GlobalComment }) {
           <MoreIcon className={'h-4 w-4'} />
         </IconButton>
       </RichTooltip>
-      <NormalModal
-        PaperProps={{
-          sx: {
-            maxWidth: 420,
-          },
-        }}
-        okText={t('button.delete')}
-        danger={true}
-        onOk={handleDeleteAction}
-        onCancel={() => {
-          setDeleteModalOpen(false);
-        }}
-        onClose={() => setDeleteModalOpen(false)}
-        open={deleteModalOpen}
-        title={<div className={'text-left'}>{t('globalComment.deleteComment')}</div>}
-      >
-        <div className={'w-full whitespace-pre-wrap break-words pb-1 text-text-caption'}>
-          {t('globalComment.confirmDeleteDescription')}
-        </div>
-      </NormalModal>
+      {deleteModalOpen && (
+        <NormalModal
+          PaperProps={{
+            sx: {
+              maxWidth: 420,
+            },
+          }}
+          okText={t('button.delete')}
+          danger={true}
+          onOk={handleDeleteAction}
+          onCancel={() => {
+            setDeleteModalOpen(false);
+          }}
+          onClose={() => setDeleteModalOpen(false)}
+          open={deleteModalOpen}
+          title={<div className={'text-left'}>{t('globalComment.deleteComment')}</div>}
+        >
+          <div className={'w-full whitespace-pre-wrap break-words pb-1 text-text-caption'}>
+            {t('globalComment.confirmDeleteDescription')}
+          </div>
+        </NormalModal>
+      )}
     </>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx b/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx
index 6dd3f6447a..eb88d1a710 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx
@@ -76,47 +76,51 @@ function MoreActions() {
       <IconButton onClick={handleClick}>
         <MoreIcon className={'text-text-caption'} />
       </IconButton>
-      <Popover
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-      >
-        <div className={'flex w-[240px] flex-col gap-2 px-2 py-2'}>
-          {actions.map((action, index) => (
-            <button
+      {open && (
+        <Popover
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+        >
+          <div className={'flex w-[240px] flex-col gap-2 px-2 py-2'}>
+            {actions.map((action, index) => (
+              <button
+                onClick={() => {
+                  action.onClick();
+                  handleClose();
+                }}
+                key={index}
+                className={
+                  'flex items-center gap-2 rounded-[8px] p-1.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
+                }
+              >
+                <action.Icon />
+                <span>{action.label}</span>
+              </button>
+            ))}
+            <div
               onClick={() => {
-                action.onClick();
-                handleClose();
+                window.open('https://appflowy.io', '_blank');
               }}
-              key={index}
               className={
-                'flex items-center gap-2 rounded-[8px] p-1.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
+                'flex w-full cursor-pointer items-center justify-center py-2 text-sm text-text-title opacity-50'
               }
             >
-              <action.Icon />
-              <span>{action.label}</span>
-            </button>
-          ))}
-          <div
-            onClick={() => {
-              window.open('https://appflowy.io', '_blank');
-            }}
-            className={'flex w-full cursor-pointer items-center justify-center py-2 text-sm text-text-title opacity-50'}
-          >
-            Powered by
-            <Logo className={'ml-3 h-4 w-4'} />
-            <AppflowyLogo className={'w-20'} />
+              Powered by
+              <Logo className={'ml-3 h-4 w-4'} />
+              <AppflowyLogo className={'w-20'} />
+            </div>
           </div>
-        </div>
-      </Popover>
+        </Popover>
+      )}
     </>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
index df69423f8d..5064364772 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
@@ -67,7 +67,7 @@ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer:
     >
       <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
         <Suspense fallback={null}>
-          {!openDrawer && (
+          {!openDrawer && openPopover && (
             <OutlinePopover
               onMouseEnter={handleOpenPopover}
               onMouseLeave={debounceClosePopover}