From 717bda38b9554705bb80deec5ca012cabbca759d Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 7 Apr 2022 19:19:00 +0530
Subject: [PATCH 1/3] use react-window list for upload progress bar lists

---
 src/components/FileList.tsx                   | 31 +++++++++++++
 .../pages/gallery/UploadProgress.tsx          | 46 +++++++++----------
 2 files changed, 53 insertions(+), 24 deletions(-)
 create mode 100644 src/components/FileList.tsx

diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
new file mode 100644
index 000000000..0dc2e8d2a
--- /dev/null
+++ b/src/components/FileList.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
+
+interface Iprops {
+    fileList: any[];
+}
+
+export const Wrapper = styled.div`
+    padding-left: 30px;
+    margin-top: 5px;
+    margin-bottom: 0px;
+`;
+
+export default function FileList(props: Iprops) {
+    const Row = ({ index, style }) => (
+        <div style={style}>{props.fileList[index % props.fileList.length]}</div>
+    );
+
+    return (
+        <Wrapper>
+            <List
+                height={Math.min(35 * props.fileList.length, 140)}
+                width={'100%'}
+                itemSize={35}
+                itemCount={props.fileList.length}>
+                {Row}
+            </List>
+        </Wrapper>
+    );
+}
diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx
index 5758aeea1..34e0c4e53 100644
--- a/src/components/pages/gallery/UploadProgress.tsx
+++ b/src/components/pages/gallery/UploadProgress.tsx
@@ -9,7 +9,7 @@ import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
 import constants from 'utils/strings/constants';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
-
+import FileList from 'components/FileList';
 interface Props {
     fileCounter;
     uploadStage;
@@ -28,17 +28,6 @@ interface FileProgresses {
     progress: number;
 }
 
-export const FileList = styled.ul`
-    padding-left: 30px;
-    margin-top: 5px;
-    margin-bottom: 0px;
-    & > li {
-        padding-left: 5px;
-        margin-bottom: 10px;
-        color: #ccc;
-    }
-`;
-
 const SectionTitle = styled.div`
     display: flex;
     justify-content: space-between;
@@ -49,7 +38,6 @@ const SectionTitle = styled.div`
 
 const Section = styled.div`
     margin: 20px 0;
-    word-break: break-word;
     padding: 0 20px;
 `;
 const SectionInfo = styled.div`
@@ -69,6 +57,16 @@ const NotUploadSectionHeader = styled.div`
     margin: 0 20px;
 `;
 
+const ItemContainer = styled.li`
+    padding-left: 5px;
+    margin-bottom: 10px;
+    color: #ccc;
+    max-width: 366px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
 interface ResultSectionProps {
     filenames: Map<number, string>;
     fileUploadResultMap: Map<FileUploadResults, number[]>;
@@ -96,13 +94,13 @@ const ResultSection = (props: ResultSectionProps) => {
                         {props.sectionInfo && (
                             <SectionInfo>{props.sectionInfo}</SectionInfo>
                         )}
-                        <FileList>
-                            {fileList.map((fileID) => (
-                                <li key={fileID}>
+                        <FileList
+                            fileList={fileList.map((fileID) => (
+                                <ItemContainer key={fileID}>
                                     {props.filenames.get(fileID)}
-                                </li>
+                                </ItemContainer>
                             ))}
-                        </FileList>
+                        />
                     </SectionContent>
                 </Accordion.Collapse>
             </Section>
@@ -118,7 +116,7 @@ interface InProgressProps {
 }
 const InProgressSection = (props: InProgressProps) => {
     const [listView, setListView] = useState(true);
-    const fileList = props.fileProgressStatuses;
+    const fileList = props.fileProgressStatuses ?? [];
 
     return (
         <Accordion defaultActiveKey="0">
@@ -134,15 +132,15 @@ const InProgressSection = (props: InProgressProps) => {
                         {props.sectionInfo && (
                             <SectionInfo>{props.sectionInfo}</SectionInfo>
                         )}
-                        <FileList>
-                            {fileList.map(({ fileID, progress }) => (
-                                <li key={fileID}>
+                        <FileList
+                            fileList={fileList.map(({ fileID, progress }) => (
+                                <ItemContainer key={fileID}>
                                     {`${props.filenames.get(
                                         fileID
                                     )} - ${progress}%`}
-                                </li>
+                                </ItemContainer>
                             ))}
-                        </FileList>
+                        />
                     </SectionContent>
                 </Accordion.Collapse>
             </Section>

From 49b440278683f85ba8151c4faae6a3884b49143d Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 7 Apr 2022 23:08:17 +0530
Subject: [PATCH 2/3] make min size 150px to make next item little visible

---
 src/components/FileList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
index 0dc2e8d2a..9cd8f11df 100644
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@@ -20,7 +20,7 @@ export default function FileList(props: Iprops) {
     return (
         <Wrapper>
             <List
-                height={Math.min(35 * props.fileList.length, 140)}
+                height={Math.min(35 * props.fileList.length, 150)}
                 width={'100%'}
                 itemSize={35}
                 itemCount={props.fileList.length}>

From af798e115b6592bc28f8c1c955a3d77dde743ab7 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 7 Apr 2022 23:20:42 +0530
Subject: [PATCH 3/3] fix padding

---
 src/components/FileList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
index 9cd8f11df..c28b08f81 100644
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@@ -8,7 +8,7 @@ interface Iprops {
 
 export const Wrapper = styled.div`
     padding-left: 30px;
-    margin-top: 5px;
+    margin-top: 15px;
     margin-bottom: 0px;
 `;
 
@@ -20,9 +20,9 @@ export default function FileList(props: Iprops) {
     return (
         <Wrapper>
             <List
-                height={Math.min(35 * props.fileList.length, 150)}
+                height={Math.min(30 * props.fileList.length, 135)}
                 width={'100%'}
-                itemSize={35}
+                itemSize={30}
                 itemCount={props.fileList.length}>
                 {Row}
             </List>