🔧 Fixed jankiness with Downloads Panel

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -44,9 +44,6 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
           </div>
         </div>
       </div>
-      
-     
-      
       <div className="search-results-container">
         {!isEmpty(comicVineSearchResults) && (
           <MatchResult

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -37,14 +37,14 @@ export const DownloadsPanel = (
       if (!isEmpty(userSettings)) {
         dispatch(
           getBundlesForComic(props.comicObjectId, ADCPPSocket, {
-            username: `${userSettings.directConnect.client.username}`,
+            username: `${userSettings.directConnect.client.host.username}`,
-            password: `${userSettings.directConnect.client.password}`,
+            password: `${userSettings.directConnect.client.host.password}`,
           }),
         );
         dispatch(
           getDownloadProgress(props.comicObjectId, ADCPPSocket, {
-            username: `${userSettings.directConnect.client.username}`,
+            username: `${userSettings.directConnect.client.host.username}`,
-            password: `${userSettings.directConnect.client.password}`,
+            password: `${userSettings.directConnect.client.host.password}`,
           }),
         );
       }
@@ -89,7 +89,8 @@ export const DownloadsPanel = (
   };
 
   const Bundles = (props) => {
-    return (
+    return !isEmpty(props.data) ? (
+      <div className="column is-full">
         <table className="table is-striped">
           <thead>
             <tr>
@@ -99,9 +100,7 @@ export const DownloadsPanel = (
             </tr>
           </thead>
           <tbody>
-          {!isNil(props.data) &&
+            {map(props.data, (bundle) => (
-            props.data &&
-            map(props.data, (bundle) => (
               <tr key={bundle.id}>
                 <td>
                   <h5>{ellipsize(bundle.name, 58)}</h5>
@@ -117,14 +116,18 @@ export const DownloadsPanel = (
             ))}
           </tbody>
         </table>
+      </div>
+    ) : (
+      <div className="column is-full"> {"No Downloads Found"} </div>
     );
   };
 
   return !isNil(props.data) ? (
-    <div className="columns">
+    <>
       {!isNil(downloadProgressTick) ? (
         <ProgressTick data={downloadProgressTick} />
       ) : null}
+      <div className="columns">
         {!isEmpty(ADCPPSocket) ? (
           <Bundles data={bundles} />
         ) : (
@@ -138,6 +141,7 @@ export const DownloadsPanel = (
           </div>
         )}
       </div>
+    </>
   ) : null;
 };