Add book tags submission indicator

[jimchamp]

Closes #5646

Adds the submission indicator from #4948 to the book tags Vue component.

Technical

Adds a new Vue component representing a submission status indicator. A spinner is displayed when a tag is POSTed to the server. A success or failure message is displayed when the response has been received.

State is managed by an object imported from ObservationService.js (I'm not thrilled about this, but it saves a bunch of difficult to follow messaging between components). The object's state is changed by the updateObservation function, which is used to POST observations to the server.

Testing

Screenshot

Stakeholders

[RayBB]

Functionally, I think this serves the purpose of what I was hoping for.
Personally I think it would be better to put the status at the bottom rather than the middleish of modal. Something like this.

Additionally, again my own design preference, I think it is information overload to show a spinning loading indicator after every single change. It is a little distracting and for some maybe anxiety producing. Others also have done away with loading indicators.

I think we could simplify by not revealing the state of saving. Just have the states of saved or failed. Perhaps a nice indicator of a new save would be to make a checkmark bounce or redraw or something. I'll think on it more.

@jimchamp

[jimchamp]

This is great feedback! Having only success and failure states removes the need for an object to track state. I also like the idea of using animations to indicate state.

[RayBB]

One more thing I forgot to mention in that message is accessibility.
I tried to search briefly but didn't see a whole lot about how do we make this easy for people to understand that are using screen readers? I think putting it at the bottom can help but I don't know if there's something else to do there

[mekarpeles]

I agree that the positioning is kind of off (bottom or top or somewhere it doesn't move the position of other content) would be best.

Also, I agree that the the spinner is kind of distracting.

I might just put the green text "saved" next to the X as that's likely where they're going to go to close the form (and they'll have confidence everything is saved).

@RayBB does these changes seem like a good compromise?

If so, @jimchamp can make these tweaks? Or are they hard to implement?

I'm deferring to you the discretion to either merge as is or make these tweaks if they're easy enough.

Thanks everyone!

[jimchamp]

I have removed the spinner and added a message explaining that the tags in the first section have been saved.

[mekarpeles]

lgtm, if we're going to say, "the reviews above [...]" then maybe we should just put the copy above, alongside the reviews, but I think this makes the solution "possible", merging

[mekarpeles]

Revisiting this for accessibility may be a good one for your Menu for volunteers @jimchamp