feat: add loading states

invm · Oct 1, 2023 · 800ea01 · 800ea01
1 parent 9a64dbf
commit 800ea01
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 39 deletions.
diff --git a/src/components/Screens/Console/Content/QueryTab/ActionRowButton.tsx b/src/components/Screens/Console/Content/QueryTab/ActionRowButton.tsx
@@ -0,0 +1,34 @@
+import { Refresh } from "components/UI/Icons";
+import { Match, Show, Switch } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+
+type ActionRowButton = {
+  dataTip: string;
+  onClick: () => void;
+  icon: JSX.Element;
+  loading?: boolean;
+};
+
+export const ActionRowButton = (props: ActionRowButton) => {
+  return (
+    <div
+      class="tooltip tooltip-primary tooltip-bottom"
+      data-tip={props.dataTip}
+    >
+      <button
+        class="btn btn-ghost btn-xs mr-2"
+        disabled={props.loading !== undefined ? props.loading : false}
+        onClick={props.onClick}
+      >
+        <Switch>
+          <Match when={props.loading}>
+            <span class="loading text-primary loading-bars loading-xs"></span>
+          </Match>
+          <Match when={!props.loading}>
+            {props.icon}
+          </Match>
+        </Switch>
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx b/src/components/Screens/Console/Content/QueryTab/QueryTextArea.tsx
@@ -3,7 +3,15 @@ import {
   createEditorControlledValue,
   createEditorFocus,
 } from "solid-codemirror";
-import { Accessor, createEffect, createSignal, For, Show } from "solid-js";
+import {
+  Accessor,
+  createEffect,
+  createSignal,
+  For,
+  Match,
+  Show,
+  Switch,
+} from "solid-js";
 import {
   EditorView,
   drawSelection,
@@ -31,6 +39,7 @@ import { basicSetup } from "codemirror";
 import { createShortcut } from "@solid-primitives/keyboard";
 import { search } from "@codemirror/search";
 import { createStore } from "solid-js/store";
+import { ActionRowButton } from "./ActionRowButton";
 
 export const QueryTextArea = (props: {
   idx: Accessor<number>;
@@ -49,6 +58,7 @@ export const QueryTextArea = (props: {
   } = useAppSelector();
   const [code, setCode] = createSignal("");
   const [schema, setSchema] = createStore({});
+  const [loading, setLoading] = createSignal(false);
 
   const updateQueryText = async (query: string) => {
     updateContentTab("data", { query });
@@ -94,6 +104,8 @@ export const QueryTextArea = (props: {
   };
 
   const onExecute = async () => {
+    if (loading()) return;
+    setLoading(true);
     const selectedText = getSelection();
     updateContentTab("error", undefined);
     const activeConnection = getConnection();
@@ -106,6 +118,8 @@ export const QueryTextArea = (props: {
       // console.log({ result_sets });
     } catch (error) {
       updateContentTab("error", String(error));
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -132,42 +146,25 @@ export const QueryTextArea = (props: {
 
   return (
     <div class="flex-1 flex flex-col">
-      <div class="w-full px-2 py-1 bg-base-100 border-b-2 border-accent flex items-center">
+      <div class="w-full px-2 py-1 bg-base-100 border-b-2 border-accent flex justify-between items-center">
         <div class="flex items-center">
-          <div
-            class="tooltip tooltip-primary tooltip-bottom"
-            data-tip={t("components.console.actions.format")}
-          >
-            <button
-              class="btn btn-ghost btn-xs mr-2"
-              onClick={() => onFormat()}
-            >
-              <EditIcon />
-            </button>
-          </div>
-          <div
-            class="tooltip tooltip-primary tooltip-bottom"
-            data-tip={t("components.console.actions.execute")}
-          >
-            <button
-              class="btn btn-ghost btn-xs mr-2"
-              onClick={() => onExecute()}
-            >
-              <FireIcon />
-            </button>
-          </div>
+          <ActionRowButton
+            dataTip={t("components.console.actions.format")}
+            onClick={onFormat}
+            icon={<EditIcon />}
+          />
+          <ActionRowButton
+            dataTip={t("components.console.actions.execute")}
+            onClick={onExecute}
+            loading={loading()}
+            icon={<FireIcon />}
+          />
 
-          <div
-            class="tooltip tooltip-primary tooltip-bottom"
-            data-tip={t("components.console.actions.copy_query")}
-          >
-            <button
-              class="btn btn-ghost btn-xs mr-2"
-              onClick={() => copyQueryToClipboard()}
-            >
-              <Copy />
-            </button>
-          </div>
+          <ActionRowButton
+            dataTip={t("components.console.actions.copy_query")}
+            onClick={copyQueryToClipboard}
+            icon={<Copy />}
+          />
 
           <div
             class="tooltip tooltip-primary tooltip-bottom"
@@ -189,7 +186,6 @@ export const QueryTextArea = (props: {
             </div>
           </div>
         </div>
-
         <Show when={getContent().error}>
           <Alert color="error">{getContent().error}</Alert>
         </Show>

diff --git a/src/components/Screens/Console/Sidebar/Sidebar.tsx b/src/components/Screens/Console/Sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { TableColumnsCollapse } from "./TableColumnsCollapse";
 import { useAppSelector } from "services/Context";
-import { For, onMount } from "solid-js";
+import { createSignal, For, Match, onMount, Switch } from "solid-js";
 import { createStore } from "solid-js/store";
 import { t } from "utils/i18n";
 import { Refresh } from "components/UI/Icons";
@@ -20,6 +20,7 @@ export const Sidebar = () => {
     },
   } = useAppSelector();
   const [tables, setTables] = createStore<Table[]>([]);
+  const [loading, setLoading] = createSignal(false);
 
   onMount(() => {
     if (connectionStore.schema) {
@@ -35,6 +36,7 @@ export const Sidebar = () => {
   const refreshEntities = async () => {
     const config = getConnection().connection;
     try {
+      setLoading(true);
       await invoke("init_connection", { config });
       const { result } = await invoke<RawQueryResult>("get_columns", {
         connId: config.id,
@@ -43,6 +45,8 @@ export const Sidebar = () => {
       updateConnectionTab("schema", { schema });
     } catch (error) {
       addError(String(error));
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -63,8 +67,15 @@ export const Sidebar = () => {
             )}
           </For>
         </select>
-        <button onClick={refreshEntities} class="btn btn-xs">
-          <Refresh />
+        <button onClick={refreshEntities} disabled={loading()} class="btn btn-xs">
+          <Switch>
+            <Match when={loading()}>
+              <span class="loading text-primary loading-bars loading-xs"></span>
+            </Match>
+            <Match when={!loading()}>
+              <Refresh />
+            </Match>
+          </Switch>
         </button>
       </div>
       <div class="overflow-y-auto h-full">