jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-28 21:56:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loader on image select

Browse Source 
Change-type: patch
Signed-off-by: Andrea Rosci <andrear@balena.io>
This commit is contained in:
JSReds 2021-06-24 11:47:46 +00:00 committed by Lorenzo Alberto Maria Ambrosi
parent 32ca28a3a9
commit b272ef296d
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/gui/app/components/source-selector/source-selector.tsx
View File

@ -279,6 +279,7 @@ interface SourceSelectorState {
showDriveSelector: boolean;
defaultFlowActive: boolean;
imageSelectorOpen: boolean;
imageLoading: boolean;
}
export class SourceSelector extends React.Component<
@ -297,6 +298,7 @@ export class SourceSelector extends React.Component<
showDriveSelector: false,
defaultFlowActive: true,
imageSelectorOpen: false,
imageLoading: false,
};
// Bind `this` since it's used in an event's callback
@ -317,10 +319,12 @@ export class SourceSelector extends React.Component<
}
private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
this.setState({ imageLoading: true });
await this.selectSource(
imagePath,
isURL(imagePath) ? sourceDestination.Http : sourceDestination.File,
).promise;
this.setState({ imageLoading: false });
}
private async createSource(selected: string, SourceType: Source) {
@ -567,7 +571,12 @@ export class SourceSelector extends React.Component<
// TODO add a visual change when dragging a file over the selector
public render() {
const { flashing } = this.props;
const { showImageDetails, showURLSelector, showDriveSelector } = this.state;
const {
showImageDetails,
showURLSelector,
showDriveSelector,
imageLoading,
} = this.state;
const selectionImage = selectionState.getImage();
let image: SourceMetadata | DrivelistDrive =
selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
@ -605,16 +614,18 @@ export class SourceSelector extends React.Component<
}}
/>
{selectionImage !== undefined ? (
{selectionImage !== undefined || imageLoading ? (
<>
<StepNameButton
plain
onClick={() => this.showSelectedImageDetails()}
tooltip={imageName || imageBasename}
>
{middleEllipsis(imageName || imageBasename, 20)}
<Spinner show={imageLoading}>
{middleEllipsis(imageName || imageBasename, 20)}
</Spinner>
</StepNameButton>
{!flashing && (
{!flashing && !imageLoading && (
<ChangeButton
plain
mb={14}
@ -623,7 +634,7 @@ export class SourceSelector extends React.Component<
Remove
</ChangeButton>
)}
{!_.isNil(imageSize) && (
{!_.isNil(imageSize) && !imageLoading && (
<DetailsText>{prettyBytes(imageSize)}</DetailsText>
)}
</>