From 27f70cd3ef903cd15a2511ec3b281d8c4d659f4a Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Tue, 28 Mar 2023 17:15:51 +0800
Subject: [PATCH] chore: dynamic import query drawer

---
 components/QueryDrawer.tsx | 8 ++++++--
 pages/index.tsx            | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/QueryDrawer.tsx b/components/QueryDrawer.tsx
index 11a1bbe..1082984 100644
--- a/components/QueryDrawer.tsx
+++ b/components/QueryDrawer.tsx
@@ -12,9 +12,9 @@ type RawQueryResult = {
 
 const QueryDrawer = () => {
   const queryStore = useQueryStore();
-  const context = queryStore.context;
   const [rawResults, setRawResults] = useState<RawQueryResult[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const context = queryStore.context;
   const columns = Object.keys(head(rawResults) || {}).map((key) => {
     return {
       name: key,
@@ -23,6 +23,10 @@ const QueryDrawer = () => {
   });
 
   useEffect(() => {
+    if (!queryStore.showDrawer) {
+      return;
+    }
+
     if (!context) {
       toast.error("No execution context found.");
       setIsLoading(false);
@@ -56,7 +60,7 @@ const QueryDrawer = () => {
     };
 
     executeStatement();
-  }, [context]);
+  }, [context, queryStore.showDrawer]);
 
   const close = () => queryStore.toggleDrawer(false);
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 4e2bf31..b15abb7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,7 +3,6 @@ import Head from "next/head";
 import dynamic from "next/dynamic";
 import React, { useEffect } from "react";
 import { ResponsiveWidth, useLayoutStore } from "@/store";
-import QueryDrawer from "@/components/QueryDrawer";
 
 // Use dynamic import to avoid page hydrated.
 // reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268
@@ -13,6 +12,9 @@ const ConnectionSidebar = dynamic(() => import("@/components/ConnectionSidebar")
 const ChatView = dynamic(() => import("@/components/ChatView"), {
   ssr: false,
 });
+const QueryDrawer = dynamic(() => import("@/components/QueryDrawer"), {
+  ssr: false,
+});
 
 const ChatPage: NextPage = () => {
   const layoutStore = useLayoutStore();