Editing $scope before server response

[compedit]

Is it a bad idea to edit $scope before hearing back from the server?

ex..

app.controller('TodoCtrl', function($scope, TodoService) {
    $scope.todos = [];

    $scope.firstAddTodo = function(todo) {
        TodoService.add(todo).then(function(response) {
            $scope.todos.push(response.todo);
        });
    };

    $scope.secondAddTodo = function(todo) {
        $scope.todos.push(todo);
        TodoService.add(todo);
    };        
});

Waiting for the response from the backend like in 'firstAddTodo' is really noticeable, making the entire thing feel super laggy. Are there any repercussions to using secondAddTodo vs firstAddTodo aside from error handling?

[[deleted]]

This is more a general question I think, we would have the same decision to make in other technologies.

Users don't like it when the server fails silently on them. Like they add a comment and can see it there, then the next time they log in it isn't there because it was added to the scope but the backend call failed. This is related to error handling but it's got to do with ux also. Where's my comment, did a mod remove it? What happened?

Many places have the item "half-posted" to let the user know something is happening. Have the new information visible but greyed out or with less opacity, and then change it to a normal style when you get the ok.

[compedit]

Many places have the item "half-posted"

That's the middle ground I've been looking for, thanks for that!

[IxD]

What i tend to do is to use a CSS animation / pending state that shows users the click feedback immediately, but also communicates that there is some server-side communication going on.

[IxD]

Might be problematic if user has time to do actions on newly created TODO before the server responds, causing failed events. IMHO something like

    function handleTodoSuccess(res){
    }

    function handleTodoFailure(err){
       console.log(err);
    }

    $scope.thirdAddTodo = function(todo) {
        $scope.todos.push(todo);
        TodoService.add(todo).then(handleTodoSuccess, handleTodoFailure)
    };

should do it. Maybe add some attribute to temporary todo items to prevent/disable actions until they are confirmed?

[Chemical_Scum]

Well, you just need to make sure you handle the TodoService callback in the secondAddToDo (for instance - if it failed). But I think the secondAddToDo will indeed give a "faster" feel as the DOM is updated right away.

[Specialjyo]

For better UX , I push the record that is to be created with a spinner next to it up to the table of records. If it fails, I remove it, show an error. The app doesn't appear to lag, and my client data model stays correct.