jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-28 05:36:34 +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; showDriveSelector: boolean;
defaultFlowActive: boolean; defaultFlowActive: boolean;
imageSelectorOpen: boolean; imageSelectorOpen: boolean;
imageLoading: boolean;
} }
export class SourceSelector extends React.Component< export class SourceSelector extends React.Component<
@ -297,6 +298,7 @@ export class SourceSelector extends React.Component<
showDriveSelector: false, showDriveSelector: false,
defaultFlowActive: true, defaultFlowActive: true,
imageSelectorOpen: false, imageSelectorOpen: false,
imageLoading: false,
}; };
// Bind `this` since it's used in an event's callback // 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) { private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
this.setState({ imageLoading: true });
await this.selectSource( await this.selectSource(
imagePath, imagePath,
isURL(imagePath) ? sourceDestination.Http : sourceDestination.File, isURL(imagePath) ? sourceDestination.Http : sourceDestination.File,
).promise; ).promise;
this.setState({ imageLoading: false });
} }
private async createSource(selected: string, SourceType: Source) { 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 // TODO add a visual change when dragging a file over the selector
public render() { public render() {
const { flashing } = this.props; const { flashing } = this.props;
const { showImageDetails, showURLSelector, showDriveSelector } = this.state; const {
showImageDetails,
showURLSelector,
showDriveSelector,
imageLoading,
} = this.state;
const selectionImage = selectionState.getImage(); const selectionImage = selectionState.getImage();
let image: SourceMetadata | DrivelistDrive = let image: SourceMetadata | DrivelistDrive =
selectionImage !== undefined ? selectionImage : ({} as SourceMetadata); selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
@ -605,16 +614,18 @@ export class SourceSelector extends React.Component<
}} }}
/> />
{selectionImage !== undefined ? ( {selectionImage !== undefined || imageLoading ? (
<> <>
<StepNameButton <StepNameButton
plain plain
onClick={() => this.showSelectedImageDetails()} onClick={() => this.showSelectedImageDetails()}
tooltip={imageName || imageBasename} tooltip={imageName || imageBasename}
> >
{middleEllipsis(imageName || imageBasename, 20)} <Spinner show={imageLoading}>
{middleEllipsis(imageName || imageBasename, 20)}
</Spinner>
</StepNameButton> </StepNameButton>
{!flashing && ( {!flashing && !imageLoading && (
<ChangeButton <ChangeButton
plain plain
mb={14} mb={14}
@ -623,7 +634,7 @@ export class SourceSelector extends React.Component<
Remove Remove
</ChangeButton> </ChangeButton>
)} )}
{!_.isNil(imageSize) && ( {!_.isNil(imageSize) && !imageLoading && (
<DetailsText>{prettyBytes(imageSize)}</DetailsText> <DetailsText>{prettyBytes(imageSize)}</DetailsText>
)} )}
</> </>