From c3b9ad9d9173e1c0f53f5847cca9b970c056d63d Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 2 Nov 2023 23:01:43 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Added=20loading=20state?=
 =?UTF-8?q?=20check?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../QbittorrentConnectionForm.tsx             | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
index 3c7c342..0634a69 100644
--- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
+++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
@@ -1,7 +1,6 @@
-import React, { ReactElement, useCallback, useEffect } from "react";
+import React, { ReactElement } from "react";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { saveSettings } from "../../../actions/settings.actions";
 import axios from "axios";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
@@ -38,7 +37,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
     enabled: !!connectionDetails,
   });
   console.log(qbittorrentClientInfo?.data);
-
+  // Update action using a mutation
   const { mutate } = useMutation({
     mutationFn: async (values) =>
       await axios({
@@ -50,15 +49,21 @@ export const QbittorrentConnectionForm = (): ReactElement => {
 
   return (
     <>
-      <ConnectionForm
-        initialData={hostDetails}
-        formHeading={"qBittorrent Configuration"}
-        submitHandler={mutate}
-      />
+      {!isLoading ? (
+        <>
+          <ConnectionForm
+            initialData={hostDetails}
+            formHeading={"qBittorrent Configuration"}
+            submitHandler={mutate}
+          />
 
-      <pre className="mt-5">
-        {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
-      </pre>
+          <pre className="mt-5">
+            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
+          </pre>
+        </>
+      ) : (
+        "Loading..."
+      )}
     </>
   );
 };