🧽 Cleanup of various UX aspects

package.json

@@ -33,6 +33,7 @@
     "babel-polyfill": "^6.26.0",
     "better-docs": "^2.3.2",
     "calibre-opds": "^1.0.7",
+    "chokidar": "^3.5.2",
     "comlink-loader": "^2.0.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.1.0",
@@ -50,9 +51,9 @@
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.3",
+    "react-loader-spinner": "^4.0.0",
     "react-select": "^4.3.1",
     "react-sliding-pane": "^7.0.0",
-    "react-spinners": "^0.11.0",
     "react-table": "^7.7.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",

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 =

webpack.config.js

@@ -76,7 +76,6 @@ module.exports = {
   },
   plugins: [
     // new BundleAnalyzerPlugin(),
-    // new CleanWebpackPlugin([outputDirectory]),
     new HtmlWebpackPlugin({
       template: "./public/index.html",
       favicon: "./public/favicon.ico",

yarn.lock

@@ -1076,19 +1076,6 @@
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/react@^11.1.4":
-  version "11.4.0"
-  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz"
-  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.1"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
 "@emotion/serialize@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz"
@@ -1100,7 +1087,7 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+"@emotion/sheet@^1.0.0":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz"
   integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
@@ -3637,9 +3624,9 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.0:
+chokidar@^3.4.0, chokidar@^3.5.2:
   version "3.5.2"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
   integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
   dependencies:
     anymatch "~3.1.2"
@@ -10897,6 +10884,13 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-loader-spinner@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#43d9e71b0574219f64216933c28ef5faa12262f6"
+  integrity sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-modal@^3.12.1:
   version "3.14.3"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
@@ -10969,13 +10963,6 @@ react-sliding-pane@^7.0.0:
     prop-types "^15.7.2"
     react-modal "^3.12.1"
 
-react-spinners@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz"
-  integrity sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==
-  dependencies:
-    "@emotion/react" "^11.1.4"
-
 react-table@^7.7.0:
   version "7.7.0"
   resolved "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz"