➡️ Drawer beautification

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">