💄 style: fix default plugins height unstabled when scrolling (lobehub…

…#1142) * ⚡️ perf: Add cache to render default plugins * 🐛 fix: The debug panel cannot be closed
suaifu · Jan 24, 2024 · abed417 · abed417
1 parent 0159a1a
commit abed417
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/features/Conversation/Plugins/Inspector/index.tsx b/src/features/Conversation/Plugins/Inspector/index.tsx
@@ -118,7 +118,7 @@ const Inspector = memo<InspectorProps>(
                 label: t('debug.response'),
               },
             ]}
-            style={{ maxWidth: 800 }}
+            style={{ display: 'grid', maxWidth: 800 }}
           />
         )}
       </Flexbox>

diff --git a/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx b/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx
@@ -8,18 +8,23 @@ interface SystemJsRenderProps extends PluginRenderProps {
   url: string;
 }
 
+const RenderCache: {
+  [url: string]: PluginRender;
+} = {};
+
 const SystemJsRender = memo<SystemJsRenderProps>(({ url, ...props }) => {
-  const [component, setComp] = useState<PluginRender | null>(null);
+  const [component, setComp] = useState<PluginRender | undefined>(RenderCache[url]);
 
   useEffect(() => {
     system
       .import(url)
       .then((module1) => {
         setComp(module1.default);
+        RenderCache[url] = module1.default;
         // 使用module1模块
       })
       .catch((error) => {
-        setComp(null);
+        setComp(undefined);
         console.error(error);
       });
   }, [url]);