🧽 Cleanup of various UX aspects

src/client/actions/airdcpp.actions.tsx

@@ -32,6 +32,10 @@ export const search = (data: SearchData) => async (dispatch) => {
       await SocketService.connect("admin", "password", true);
     }
     const instance: SearchInstance = await SocketService.post("search");
+    console.log(instance)
+    dispatch({
+      type: AIRDCPP_SEARCH_IN_PROGRESS,
+    });
 
     // We want to get notified about every new result in order to make the user experience better
     await SocketService.addListener(

src/client/components/ComicDetail.tsx

@@ -8,9 +8,9 @@ import DownloadsPanel from "./DownloadsPanel";
 import SlidingPane from "react-sliding-pane";
 import Select, { components } from "react-select";
 
-import { css } from "@emotion/react";
 import "react-sliding-pane/dist/react-sliding-pane.css";
-import PuffLoader from "react-spinners/PuffLoader";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import Loader from "react-loader-spinner";
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
@@ -377,7 +377,14 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               ) : (
                 <div className="progress-indicator-container">
                   <div className="indicator">
-                    <PuffLoader loading={comicVineAPICallProgress} />
+                    <Loader
+                      type="MutatingDots"
+                      color="#CCC"
+                      secondaryColor="#999"
+                      height={100}
+                      width={100}
+                      visible={comicVineAPICallProgress}
+                    />
                   </div>
                 </div>
               )}

src/client/constants/action-types.ts

@@ -34,6 +34,7 @@ export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =
 export const AIRDCPP_SEARCH_IN_PROGRESS = "AIRDCPP_SEARCH_IN_PROGRESS";
 export const AIRDCPP_SEARCH_RESULTS_RECEIVED =
   "AIRDCPP_SEARCH_RESULTS_RECEIVED";
+export const AIRDCPP_SEARCH_COMPLETE = "AIRDCPP_SEARCH_COMPLETE";
 
 export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
 export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =