DEV Community

Cover image for Pairing with Community Member Seth Hall
Nick Taylor Subscriber for The DEV Team

Posted on • Edited on • Originally published at iamdeveloper.com

14 2

Pairing with Community Member Seth Hall

On , DEV Community member Seth Hall joined Christina and I on the pairing stream to work on an issue related to image uploads in the editor.

Here is the issue that we were working on:

[Editor] Add loading spinner for image drag-and-drop upload #12443

Describe the bug

Today, when someone in the editor (/new) drags-and-drops an image to upload it, they have no indication that it is currently uploading because there is no spinning indicator. This UX bug sets incorrect expectations on how our product works.

To Reproduce

  1. Go to /new
  2. Drag an image file into body area to upload an image
  3. Wait for image to upload

This is how it incorrectly works here:

current image upload

Expected behavior

2021-01-26_Editor-Upload-Image-Fix

The easiest solution here would be to render the same "Loading..." indicator when people upload an image from the "Upload image" button.

Desktop (please complete the following information):

  • OS, version: Mac OS 11
  • Browser, version: Firefox

On this stream, we covered:

  • Debugging tools in the browser, which helped us figure out why the image upload spinner wasn't displaying
  • The inner workings of a Forem instance's article editor
  • Why the image upload spinner was not appearing when an image was pasted or dragged and dropped
![A magnifying glass](https://media.giphy.com/media/0GsNMsRwDKKMjiwIe5/giphy.gif)

Thanks again for coming on the stream, Seth!

You can also find the three of us all over the web here:

Seth:

Nick:

Christina:

Looking forward to seeing you on future streams! If you're interested in pairing, fill out this form. We’d love to tackle an issue with you that the whole community could learn from!

P.S. Follow DEV on Twitch to be notified when future streams begin and catch old streams on YouTube

Image of Bright Data

Cut Costs, Save Time – Get your datasets ready for action faster than ever.

Save on resources with our ready-to-use datasets designed for quick integration and application.

Reduce Costs

Top comments (0)

DEV is built on open source software called Forem!

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

Build Status Build Status GitHub commit activity GitHub issues ready for dev GitPod badge

Welcome to the Forem codebase, the platform that powersdev.to. We are so excited to have you. With your help, we canbuild out Forem’s usability, scalability, and stability to better serve ourcommunities.

What is Forem?

Forem is open source software for building communities. Communities for yourpeers, customers, fanbases, families, friends, and any other time and spacewhere people need to come together to be part of a collectiveSee our announcement postfor a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community ofsoftware developers who write articles, take part in discussions, and buildtheir professional profiles. We value supportive and constructive dialogue inthe pursuit of great code and career growth for all members. The ecosystem spansfrom beginner to advanced developers, and all are welcome to find their place…

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay