Animate Save Icon When User Enters Comment Text

[noi5e]

Description

From a user interaction standpoint, it would be helpful to have the save icon blink whenever a user enters text into a comment form.

The save icon is the 💾 in the comment toolbar below:

See #9131, particularly this comment.

Currently the comment form saves every single time the input is changed. This isn't very useful to the user, so we'll also want to implement some kind of debouncing or setTimeout delay.

Summary of Changes to Be Made

These changes can be done in separate PRs, and by different contributors. But they probably have to be done in sequence:

1. Add debouncing to delay the save method in editor.js, either wait 1000ms, or only run save when user input has stopped for 500ms (you choose the time).
2. Add some animation to the 💾 save icon when the save method runs, so that user knows that it's running. Darken the icon background. Replace the 💾 with one of these FontAwesome spinner icons.
3. Swap out the Drag and drop to add an image or file, or choose one with Saving... to absolutely spell it out for the user.

Useful Links & Images

What the end goal looks like:

These changes are going to be made in the comment/legacy editor, which lives at app/assets/javascripts/editor.js:

plots2/app/assets/javascripts/editor.js

Lines 116 to 119 in 62fdcd0

	save(thisEditor) {
	const storageKey = "plots:" + window.location.pathname + ":" + thisEditor.commentFormID;
	localStorage.setItem(storageKey, thisEditor.textAreaValue);
	}

Leave a comment below if you want to claim this issue, and post here if you need any help getting oriented to the codebase! Good luck! 🍀

[waridrox]

Can I give it a shot! This one seems to implement some great functionality :D

[noi5e]

@waridrox Definitely, go ahead!

[waridrox]

• I'm having a hard time thinking about how we can implement the spinner when the save function is being performed. That's because the whole toolbar is rendered as a partial initially so I'm not sure if we can render that specific save option differently than the rest of the toolbar icons.

• I've managed to implement a debounce function in the save function though which may same some cpu resources.

Screen.Recording.2021-03-24.mp4

• Another thing that we might do is to get away with the save icon completely and prompt the user somewhere that the posts get auto-saved so they don't need to worry about it. But that might not be a great idea from a perspective of user feedback.

@noi5e What are your views on this 🤔 ?

[noi5e]

@waridrox This is great work so far, and good questions!

I'm having a hard time thinking about how we can implement the spinner when the save function is being performed. That's because the whole toolbar is rendered as a partial initially so I'm not sure if we can render that specific save option differently than the rest of the toolbar icons.

The Editor class has an attribute commentFormId:

plots2/app/assets/javascripts/editor.js

Lines 10 to 11 in a44aff7

	constructor(defaultForm = "main", isSingleFormPage = false) {
	this.commentFormID = defaultForm;

Which can be used to refer to the particular save button that needs to be updated:

plots2/app/views/editor/_toolbar.html.erb

Lines 81 to 90 in a44aff7

	<a
	id="save-button-<%= toolbar_element_id %>"
	class="save-button btn btn-outline-secondary btn-sm"
	title="Save"
	data-form-id="<%= toolbar_element_id %>"
	data-placement="bottom"
	data-toggle="tooltip"
	>
	<i class="fa fa-save"></i>
	</a>

jQuery seems like the best tool to use in this situation. Perhaps the spinner icon can be a sibling of <i class="fa fa-save"></i> set to display: none; and jQuery will toggle() visibility between one element and the other.

editorToolbar.js does a similar thing with jQuery whenever images are uploaded to a comment form, and we need to toggle visibility of the image upload progress bars:

plots2/app/assets/javascripts/editorToolbar.js

Lines 26 to 32 in a44aff7

	start: function(e) {
	$E.setState(e.target.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
	$(e.target).removeClass('hover');
	$("#image-upload-progress-container-" + $E.commentFormID).show();
	$("#image-upload-text-" + $E.commentFormID).show();
	$("#choose-one-" + $E.commentFormID).hide();
	},

I've managed to implement a debounce function in the save function though which may same some cpu resources.

Nice! 🙌

Another thing that we might do is to get away with the save icon completely and prompt the user somewhere that the posts get auto-saved so they don't need to worry about it. But that might not be a great idea from a perspective of user feedback.

Hmm... Personally I want users to be able to use a feature we already have, and for them to know about it in an intuitive way... I think this issue is the best way to do it that I can think of. But definitely open to hearing other ideas about how to do that!

[waridrox]

Which can be used to refer to the particular save button that needs to be updated:

Thanks for the info! 😄

[waridrox]

Update - @noi5e, here are 3 versions of the implementations, though there is still a small problem to resolve 😅. But which one according to you best suits the need ?

Save button with the spinner icon

Sample1.mp4

---

Save button with no functionality

Sample2.mp4

Everything working as expected except the dark spinner background

Sample3.mp4

As you might have noticed, in sample1 and sample2 there are conflicting CSS styles at the save button which I can't figure it out yet that turn the save icon 💾 to the white color of the background 😅 when the save button is clicked.

So I'm going forward with sample3 and adding the Saving... text and see later if the CSS issue can be resolved...

[waridrox]

Here's the final implementation @noi5e, I'm really not sure how to make the CSS styles work without affecting when the 💾 icon when it is clicked. Maybe someone else can try that 😅. Other than that I've implemented what was required.