AngularJS - MeanJS articles update, blink and reloads on socket emit

Question

I am using github repo by @mleanos for MeanJS using Socket for article create and update, it uses socket to create and update articles in realtime, while updating article, the data reloads, as in, the list of articles blinks off and comes again. this happens only while updating the article. While creating, it creates new article seamlessly. how do i update the article without the data blinking on and off. Follow this link for the github repo.

Socket Article server controller

socket.on('orderCreate', function (order) {
var user = socket.request.user;

order = new Order(order);
order.user = user;

order.save(function (err) {
  if (err) {
    // Emit an error response event
    io.emit('orderCreateError', { data: order, message: errorHandler.getErrorMessage(err) });
  } else {
    // Emit a success response event
    io.emit('orderCreateSuccess', { data: order, message: 'Order created' });
  }
 });
});

// Update an Order, and then emit the response back to all connected clients.
socket.on('orderUpdate', function (data) {
var user = socket.request.user;

// Find the Order to update
Order.findById(data._id).populate('user', 'displayName').exec(function (err, order) {
  if (err) {
    // Emit an error response event
    io.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
  } else if (!order) {
    // Emit an error response event
    io.emit('orderUpdateError', { data: data, message: 'No order with that identifier has been found' });
  } else {
    order.name = data.name;

    order.save(function (err) {
      if (err) {
        // Emit an error response event
        io.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
      } else {
        // Emit a success response event
        io.emit('orderUpdateSuccess', { data: order, updatedBy: user.displayName, updatedAt: new Date(Date.now()).toLocaleString(), message: 'Updated' });
      }
    });
  }
});
});

Socket Client Controller

function saveUsingSocketEventsUpdate(isValid) {
  vm.error = null;

  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'orderForm');
    return false;
  }

  var order = vm.order;

  // we can send the user back to the orders list already
  // TODO: move create/update logic to service
  if (vm.order._id) {
    vm.order.$update(successCallback, errorCallback);
  } else {
    vm.order.$save(successCallback, errorCallback);
  }

  function successCallback(res) {
    $state.go('orders.view', {
      orderId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;
  }

  // wait to send create request so we can create a smooth transition
  $timeout(function () {
    // TODO: move create/update logic to service
    if (vm.order._id) {
      Socket.emit('orderUpdate', vm.order);
    } else {
      Socket.emit('orderCreate', vm.order);
    }        
  }, 2000);
}

Answer 1

I provided an answer in the MEANJS issue that was created for this. Since I'm the contributor that provided the branch that was used as a basis for this implementation.

The cause of the issue was that the entire list was being reloaded when any Order was updated. The solution was to update the Order that already existed in the list.

Side note: I suggested that if the Order wasn't found to get it from the server & add it to the list. This may or may not be the desired behavior. This would depend on the needs of the application.