Feature #200 - Display loader for ajax process

[BhargavBhandari90]

Description of the Change

Displaying AJAX loader for the local avatar upload delete process.

Steps:

• Login and go to user Edit Profile Screen in the backedn
• Upload avatar
• You will see a loader when upload ( If you are an Adminidtrator )
• You will see a loader when delete the local avatar

Closes #200

How to test the Change

https://somup.com/c0ehjwy3Lw

Changelog Entry

Added - Ajax loading animation during process of uploading and deleting local avatars.

Credits

Props @lllopo

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[faisal-alvi]

Hi @BhargavBhandari90, I wanted to express my appreciation for your PR. After watching your demo video, I have a couple of points to share:

1. It would be beneficial to show a loader inside the default avatar instead of displaying it on the right side.
2. Another implementation (Local avatar delete-remove functionality added #180) is about to be merged that adds "Delete" and "Remove" buttons. "Delete" permanently deletes an image from the site, while "Remove" simply disassociates it from the user while keeping it available in the media. Will your loader also work with these buttons, or will additional code need to be added to handle them?

[BhargavBhandari90]

@faisal-alvi

It would be beneficial to show a loader inside the default avatar instead of displaying it on the right side.

• OK. I will do that.

Another implementation (

• Not sure. I will check that.

[BhargavBhandari90]

This is how it looks now.

https://somup.com/c0el1lyySH

NOTE: I am still checking this with this PR: #180

[BhargavBhandari90]

@faisal-alvi

• I tried checking by merging the branch fix/41 from this Local avatar delete-remove functionality added #180
• Had one conflict and solved that and tried checking my work on the local.
• It is working fine with that task as well. https://somup.com/c0eliXy4cn

Question:

• Should I push my changes with the branch fix/41 merged in my work
  OR
• Should I wait for that to be merged in the repo?

[faisal-alvi]

@BhargavBhandari90 Awesome! thank you for your excellent work! We're almost ready to merge PR #180, and we're just waiting for some feedback from the team on my question. Once we receive that feedback, we'll merge fix/41 into develop, and then we can merge develop here.

In the meantime, I was hoping to make a small change. Currently, when the loader is displayed, the height of the div containing the avatar/loader reduces, causing the content on the page to shift vertically. I was wondering if we could apply a minimum height to the loader/avatar's parent div to avoid that shift.

Thank you again for your hard work.

[lllopo]

@faisal-alvi Just a small note - I see from the demo that the whole thing "jumps" quite a lot. Maybe it needs a fixed height on the avatar container or something so the interface remains stable when it switches between loader and image.

[faisal-alvi]

Thank you, @lllopo, for bringing that to my attention. I had actually requested the same change in my comment above.

[BhargavBhandari90]

@faisal-alvi @lllopo Thank you guys for your input. Yah I will include that jumping thing fix in my PR.

[faisal-alvi]

@BhargavBhandari90 PR #180 is closed after the discussion. It was adding "Delete" and "Remove" buttons. However, since it's closed now, we don't need to wait for it to be merged. I appreciate your patience and hard work on this PR. Please proceed with addressing the "vertical shift" issue, and once that's done, we can merge this PR. Thank you!

[BhargavBhandari90]

@BhargavBhandari90 PR #180 is closed after the discussion. It was adding "Delete" and "Remove" buttons. However, since it's closed now, we don't need to wait for it to be merged. I appreciate your patience and hard work on this PR. Please proceed with addressing the "vertical shift" issue, and once that's done, we can merge this PR. Thank you!

All right. I will try to get it done by this weekend.

[BhargavBhandari90]

@faisal-alvi

• I've fixed the loader jumping
• Also I made a small HTML structure change for consistency.
• Watch the video for the detailed update https://screenpal.com/watch/c0eOjfVaVA9

Let me know if I did it correct OR not.

Thanks

[faisal-alvi]

@BhargavBhandari90 thank you for your contribution. The video is helpful, thanks for it. I also tested it, and the loader jumping issue seems to be fixed. The new structure works fine as well.

[BhargavBhandari90]

@faisal-alvi Thank you