Font Library: add progress-bar while uploading font assets

[hbhalodia]

What?

• Add ProgressBar component while uploading the font assets.

Why?

• Issue - Closes Font Library: add progress-bar while uploading font assets #54399

How?

• This PR adds the progress bar components and hide the drop zone and file upload while assets are being uploaded.

Testing Instructions

1. Open site editor.
2. Go to styles and then typography option.
3. Select any style and there would be option for upload.
4. Add the font file there, you would see the progress bar for the moment till file uploads, and we get any notice.

Testing Instructions for Keyboard

• None.

Screenshots or screencast

• Since the uploading is very fast, you would hardly see the progress bar in action.

Font.Library.-.Progerss.Bar.webm

[mikachan]

Thanks for working on this, @hbhalodia!

Currently I'm seeing this in the isUploading state:

I think it would be good to centre align the progress bar and add some vertical spacing, similar to the mockup from @jasmussen here.

[hbhalodia]

Sure, @mikachan - I would look into this asap.

Thanks.

[hbhalodia]

Hi @mikachan, I have revised the code and made the progress bar center aligned and added the vertical spacing. Also in addition to it, I had just showed the progress bar while uploading, since while upload it is good to show just a progress bar and nothing else. Let me know if we need the bottom text while uploading, I can revert that.

Here is the screenshot how it would be while uploading.

Thank You!

[mikachan]

Thanks @hbhalodia!

Let me know if we need the bottom text while uploading, I can revert that.

After testing this out, I think we should leave this text in place, as it reduces the visual changes and layout shifts.

Maybe we should also move the Notice component below this text, to further reduce the visual changes, e.g.:

I've left an inline comment too, as I think we can re-use an existing CSS class rather than the Spacer components. Let me know what you think!

[mikachan]

I think we can achieve a more consistent layout by re-using the font-library-modal__upload-area class, as this already has a fixed height. Something like this:

Suggested change

	{ isUploading && (
	<FlexItem>
	<Spacer margin={ 32 } />
	<ProgressBar className="font-library-modal__upload-area__progress-bar" />
	<Spacer margin={ 32 } />
	</FlexItem>
	) }
	{ isUploading && (
	<FlexItem>
	<div className="font-library-modal__upload-area">
	<ProgressBar />
	</div>
	</FlexItem>
	) }

We don't want the progress bar to have a grey background, so we could adjust the CSS so the background colour is specific to the upload button:

button.font-library-modal__upload-area {
	background-color: #f0f0f0;

}

This should create a more consistent layout between the not-uploading is isUploading states:

Not-uploading	isUploading

[hbhalodia]

Sure would be looking onto this.

Thanks.

[hbhalodia]

I think we should leave this text in place

Sure, Would be keeping as is.

Maybe we should also move the Notice component below this text.

Yep, we can do it. Would update in the next commit.

Also, would address the inline comment that you have mentioned.

Thanks for the review!

[hbhalodia]

Hi @mikachan, have updated the PR with the required changes, Let me know if that works. Thanks.

Not Uploading State	Uploading State

[mikachan]

Looks great, thanks @hbhalodia! ✨

[hbhalodia]

Thanks, @mikachan 👍.