➡️ Drawer beautification

src/client/actions/fileops.actions.tsx

@@ -113,6 +113,11 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
         searchPayload.rawFileDetails.containedIn.split("/").pop(),
       );
     }
+
+    dispatch({
+      type: CV_API_CALL_IN_PROGRESS,
+    });
+
     axios
       .request({
         url: "http://localhost:3080/api/comicvine/fetchseries",
@@ -143,6 +148,6 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
     console.log(error);
   }
   dispatch({
-    type: "CV_CLEANUP",
+    type: CV_CLEANUP,
   });
 };

src/client/assets/scss/App.scss

@@ -136,7 +136,7 @@ $border-color: red;
   table {
     width: 100%;
     tbody tr:nth-child(odd) {
-      background: #eee;
+      background: #f6f6f6;
       border-radius: 5px;
     }
   }
@@ -155,3 +155,19 @@ $border-color: red;
     }
   }
 }
+
+// progress
+.progress-indicator-container {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .indicator {
+    padding: 5px;
+    width: 120px;
+    height: 120px;
+  }
+}

src/client/components/Card.tsx

@@ -13,7 +13,6 @@ interface IState {}
 class Card extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
-    console.log(props);
   }
 
   public drawCoverCard = (

src/client/components/ComicDetail.tsx

@@ -5,6 +5,8 @@ import Card from "./Card";
 import MatchResult from "./MatchResult";
 import ComicVineSearchForm from "./ComicVineSearchForm";
 import { Divider } from "antd";
+import { css } from "@emotion/react";
+import PuffLoader from "react-spinners/PuffLoader";
 import { isEmpty, isUndefined } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
@@ -28,6 +30,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicVineSearchQueryObject = useSelector(
     (state: RootState) => state.comicInfo.searchQuery,
   );
+  const comicVineAPICallProgress = useSelector(
+    (state: RootState) => state.comicInfo.inProgress,
+  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   useEffect(() => {
@@ -119,7 +124,13 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   </div>
                 </div>
               </div>
-            ) : null}
+            ) : (
+              <div className="progress-indicator-container">
+                <div className="indicator">
+                  <PuffLoader loading={comicVineAPICallProgress} />
+                </div>
+              </div>
+            )}
 
             <div className="search-results-container">
               {!isEmpty(comicVineSearchResults) && (

src/client/components/MatchResult.tsx

@@ -21,8 +21,8 @@ export const MatchResult = (props: MatchResultProps) => {
         <tbody>
           {map(props.matchData, (match, idx) => {
             return (
-              <tr className="search-result">
-                <td key={idx}>
+              <tr className="search-result" key={idx}>
+                <td>
                   <img className="cover-image" src={match.image.thumb_url} />
                 </td>
                 <td className="search-result-details">

src/client/reducers/comicinfo.reducer.js

@@ -6,6 +6,7 @@ import {
 const initialState = {
   searchResults: [],
   searchQuery: {},
+  inProgress: false,
 };
 
 function comicinfoReducer(state = initialState, action) {
@@ -13,16 +14,20 @@ function comicinfoReducer(state = initialState, action) {
     case CV_API_CALL_IN_PROGRESS:
       return {
         ...state,
-        result: {},
+        inProgress: true,
       };
     case CV_SEARCH_SUCCESS:
       return {
         ...state,
         searchResults: action.searchResults.results,
         searchQuery: action.searchQueryObject,
+        inProgress: false,
       };
     case CV_CLEANUP:
-      return initialState;
+      return {
+        searchResults: [],
+        searchQuery: {},
+      };
     default:
       return state;
   }