use details for collapsable content

package.json

@@ -45,7 +45,6 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.3.0",
     "react-burger-menu": "^3.0.4",
-    "react-collapse": "^5.1.0",
     "react-datepicker": "^4.3.0",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.2.4",

src/components/pages/gallery/UploadProgress.tsx

@@ -7,7 +7,6 @@ import { FileRejection } from 'react-dropzone';
 import styled from 'styled-components';
 import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
 import constants from 'utils/strings/constants';
-import { Collapse } from 'react-collapse';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
 
@@ -40,7 +39,7 @@ export const FileList = styled.ul`
     }
 `;
 
-const SectionTitle = styled.div`
+const SectionTitle = styled.summary`
     display: flex;
     justify-content: space-between;
     color: #eee;
@@ -48,11 +47,8 @@ const SectionTitle = styled.div`
     cursor: pointer;
 `;
 
-const Section = styled.div`
+const Section = styled.details`
     margin: 20px 0;
-    & > .ReactCollapse--collapse {
-        transition: height 200ms;
-    }
     word-break: break-word;
     padding: 0 20px;
 `;
@@ -61,7 +57,7 @@ const SectionInfo = styled.div`
     padding-left: 15px;
 `;
 
-const Content = styled.div`
+const SectionContent = styled.div`
     padding-right: 30px;
 `;
 
@@ -92,18 +88,16 @@ const ResultSection = (props: ResultSectionProps) => {
                 {props.sectionTitle}
                 {listView ? <ExpandLess /> : <ExpandMore />}
             </SectionTitle>
-            <Collapse isOpened={listView}>
-                <Content>
-                    {props.sectionInfo && (
-                        <SectionInfo>{props.sectionInfo}</SectionInfo>
-                    )}
-                    <FileList>
-                        {fileList.map((fileID) => (
-                            <li key={fileID}>{props.filenames.get(fileID)}</li>
-                        ))}
-                    </FileList>
-                </Content>
-            </Collapse>
+            <SectionContent>
+                {props.sectionInfo && (
+                    <SectionInfo>{props.sectionInfo}</SectionInfo>
+                )}
+                <FileList>
+                    {fileList.map((fileID) => (
+                        <li key={fileID}>{props.filenames.get(fileID)}</li>
+                    ))}
+                </FileList>
+            </SectionContent>
         </Section>
     );
 };
@@ -119,27 +113,23 @@ const InProgressSection = (props: InProgressProps) => {
     const fileList = props.fileProgressStatuses;
 
     return (
-        <Section>
+        <Section open>
             <SectionTitle onClick={() => setListView(!listView)}>
                 {props.sectionTitle}
                 {listView ? <ExpandLess /> : <ExpandMore />}
             </SectionTitle>
-            <Collapse isOpened={listView}>
-                <Content>
-                    {props.sectionInfo && (
-                        <SectionInfo>{props.sectionInfo}</SectionInfo>
-                    )}
-                    <FileList>
-                        {fileList.map(({ fileID, progress }) => (
-                            <li key={fileID}>
-                                {`${props.filenames.get(
-                                    fileID
-                                )} - ${progress}%`}
-                            </li>
-                        ))}
-                    </FileList>
-                </Content>
-            </Collapse>
+            <SectionContent>
+                {props.sectionInfo && (
+                    <SectionInfo>{props.sectionInfo}</SectionInfo>
+                )}
+                <FileList>
+                    {fileList.map(({ fileID, progress }) => (
+                        <li key={fileID}>
+                            {`${props.filenames.get(fileID)} - ${progress}%`}
+                        </li>
+                    ))}
+                </FileList>
+            </SectionContent>
         </Section>
     );
 };

src/services/upload/uploadManager.ts

@@ -48,6 +48,7 @@ class UploadManager {
     private failedFiles: FileWithCollection[];
     private existingFilesCollectionWise: Map<number, EnteFile[]>;
     private existingFiles: EnteFile[];
+    private count = 10000;
     private setFiles: SetFiles;
     private collections: Map<number, Collection>;
     public initUploader(progressUpdater: ProgressUpdater, setFiles: SetFiles) {
@@ -284,8 +285,8 @@ class UploadManager {
     }
 
     private async uploadNextFileInQueue(worker: any, reader: FileReader) {
-        while (this.filesToBeUploaded.length > 0) {
-            const fileWithCollection = this.filesToBeUploaded.pop();
+        while (this.filesToBeUploaded.length > 0 && this.count--) {
+            const fileWithCollection = this.filesToBeUploaded.shift();
             const { collectionID } = fileWithCollection;
             const existingFilesInCollection =
                 this.existingFilesCollectionWise.get(collectionID) ?? [];
@@ -332,6 +333,7 @@ class UploadManager {
                 fileUploadResult
             );
             UploadService.reducePendingUploadCount();
+            this.filesToBeUploaded.push(fileWithCollection);
         }
     }
 

yarn.lock

@@ -4583,11 +4583,6 @@ react-burger-menu@^3.0.4:
     prop-types "^15.7.2"
     snapsvg-cjs "0.0.6"
 
-react-collapse@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz"
-  integrity sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==
-
 react-datepicker@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.3.0.tgz"