From 972799a5cafdc1a85a8cec7950583a141e9863e3 Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Wed, 30 Mar 2022 18:40:12 +0800
Subject: [PATCH 1/2] refactor: reduce rerender times

---
 packages/mask/src/plugins/MaskPluginWrapper.tsx           | 8 ++++++--
 .../plugin-infra/src/utils/createInjectHooksRenderer.tsx  | 6 +++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx
index a029e4439a42..fcdfe63e9ab3 100644
--- a/packages/mask/src/plugins/MaskPluginWrapper.tsx
+++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx
@@ -16,6 +16,7 @@ import {
 } from '@masknet/plugin-infra'
 
 interface PluginWrapperProps extends React.PropsWithChildren<{}> {
+    open?: boolean
     title: string
     width?: number
     action?: ReactNode
@@ -116,7 +117,10 @@ export default function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
     }, [publisher, publisherLink])
 
     const inner = (
-        <div className={classes.card} onClick={(ev) => ev.stopPropagation()}>
+        <div
+            className={classes.card}
+            style={{ display: open ? 'block' : 'none' }}
+            onClick={(ev) => ev.stopPropagation()}>
             <div className={classes.header}>
                 <MaskIcon size={45} />
                 <div className={classes.title}>
@@ -153,9 +157,9 @@ export const MaskPostExtraPluginWrapper: PluginWrapperComponent<Plugin.SNSAdapto
 
         useImperativeHandle(ref, () => refItem, [refItem])
 
-        if (!open) return <>{props.children}</>
         return (
             <MaskPostExtraInfoWrapper
+                open={open}
                 title={title || t(ID, name)}
                 width={width}
                 publisher={publisher ? <PluginI18NFieldRender pluginID={ID} field={publisher.name} /> : undefined}
diff --git a/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx b/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx
index 2da5547361b3..aed1e0f4c2bc 100644
--- a/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx
+++ b/packages/plugin-infra/src/utils/createInjectHooksRenderer.tsx
@@ -18,7 +18,11 @@ export function createInjectHooksRenderer<PluginDefinition extends Plugin.Shared
         const [ref, setRef] = useState<PluginWrapperMethods | null>(null)
         if (PluginWrapperComponent) {
             return (
-                <PluginWrapperComponent definition={plugin} ref={setRef}>
+                <PluginWrapperComponent
+                    definition={plugin}
+                    ref={(methods) => {
+                        if (methods) setRef(methods)
+                    }}>
                     {ref ? (
                         <PluginWrapperMethodsContext.Provider value={ref}>
                             {element}

From 856dd2941b8de0f5b38cd8903b9703648fb44e01 Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Wed, 30 Mar 2022 19:08:46 +0800
Subject: [PATCH 2/2] fix: build error

---
 packages/mask/src/plugins/MaskPluginWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx
index fcdfe63e9ab3..b3018c47dd5e 100644
--- a/packages/mask/src/plugins/MaskPluginWrapper.tsx
+++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx
@@ -72,7 +72,7 @@ const useStyles = makeStyles()((theme) => {
 
 export default function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
     const { classes } = useStyles()
-    const { title, children, action, publisher, publisherLink } = props
+    const { open, title, children, action, publisher, publisherLink } = props
     const personaConnectStatus = usePersonaConnectStatus()
     const { t } = useI18N()