added 'loading' to message object

.npmignore

@@ -1,5 +1,6 @@
 src
 test
+test.html
 Gulpfile.js
 node_modules
 .DS_Store

build/botui.js

@@ -1,5 +1,5 @@
 /*
- * botui 0.2.2
+ * botui 0.3.0
  * A JS library to build the UI for your bot
  * https://botui.org
  *
@@ -99,7 +99,7 @@
     }
 
     var _botuiComponent = {
-      template: '<div class=\"botui botui-container\" v-botui-container><div class=\"botui-messages-container\"><div v-for=\"msg in messages\" class=\"botui-message\" :class=\"msg.cssClass\" v-botui-scroll><transition name=\"slide-fade\"><div v-if=\"msg.visible\" :class=\"[{human: msg.human, \'botui-message-content\': true}, msg.type]\"><span v-if=\"msg.type == \'text\'\" v-text=\"msg.content\" v-botui-markdown></span> <iframe v-if=\"msg.type == \'embed\'\" :src=\"msg.content\" frameborder=\"0\" allowfullscreen></iframe></div><div v-else class=\"botui-message-content loading\"><div class=\"dot\"></div><div class=\"dot\"></div><div class=\"dot\"></div></div></transition></div></div><div class=\"botui-actions-container\"><transition name=\"slide-fade\"><div v-if=\"action.show\" v-botui-scroll><form v-if=\"action.type == \'text\'\" class=\"botui-actions-text\" @submit.prevent=\"handle_action_text()\" :class=\"action.cssClass\"><i v-if=\"action.text.icon\" class=\"botui-icon botui-action-text-icon fa\" :class=\"\'fa-\' + action.text.icon\"></i> <input type=\"text\" ref=\"input\" :type=\"action.text.sub_type\" v-model=\"action.text.value\" class=\"botui-actions-text-input\" :placeholder=\"action.text.placeholder\" :size=\"action.text.size\" :value=\"action.text.value\" :class=\"action.text.cssClass\" required v-focus/> <button v-if=\"isMobile\" class=\"botui-actions-text-submit\">Go</button></form><div v-if=\"action.type == \'button\'\" class=\"botui-actions-buttons\" :class=\"action.cssClass\"> <button type=\"button\" :class=\"button.cssClass\" class=\"botui-actions-buttons-button\" v-for=\"button in action.button.buttons\" @click=\"handle_action_button(button)\" autofocus><i v-if=\"button.icon\" class=\"botui-icon botui-action-button-icon fa\" :class=\"\'fa-\' + button.icon\"></i> {{button.text}}</button></div></div></transition></div></div>', // replaced by HTML template during build. see Gulpfile.js
+      template: '<div class=\"botui botui-container\" v-botui-container><div class=\"botui-messages-container\"><div v-for=\"msg in messages\" class=\"botui-message\" :class=\"msg.cssClass\" v-botui-scroll><transition name=\"slide-fade\"><div v-if=\"msg.visible\" :class=\"[{human: msg.human, \'botui-message-content\': true}, msg.type]\"><span v-if=\"msg.type == \'text\'\" v-text=\"msg.content\" v-botui-markdown></span> <iframe v-if=\"msg.type == \'embed\'\" :src=\"msg.content\" frameborder=\"0\" allowfullscreen></iframe></div><div v-else class=\"botui-message-content loading\"><i class=\"dot\"></i><i class=\"dot\"></i><i class=\"dot\"></i></div></transition></div></div><div class=\"botui-actions-container\"><transition name=\"slide-fade\"><div v-if=\"action.show\" v-botui-scroll><form v-if=\"action.type == \'text\'\" class=\"botui-actions-text\" @submit.prevent=\"handle_action_text()\" :class=\"action.cssClass\"><i v-if=\"action.text.icon\" class=\"botui-icon botui-action-text-icon fa\" :class=\"\'fa-\' + action.text.icon\"></i> <input type=\"text\" ref=\"input\" :type=\"action.text.sub_type\" v-model=\"action.text.value\" class=\"botui-actions-text-input\" :placeholder=\"action.text.placeholder\" :size=\"action.text.size\" :value=\"action.text.value\" :class=\"action.text.cssClass\" required v-focus/> <button v-if=\"isMobile\" class=\"botui-actions-text-submit\">Go</button></form><div v-if=\"action.type == \'button\'\" class=\"botui-actions-buttons\" :class=\"action.cssClass\"> <button type=\"button\" :class=\"button.cssClass\" class=\"botui-actions-buttons-button\" v-for=\"button in action.button.buttons\" @click=\"handle_action_button(button)\" autofocus><i v-if=\"button.icon\" class=\"botui-icon botui-action-button-icon fa\" :class=\"\'fa-\' + button.icon\"></i> {{button.text}}</button></div></div></transition></div></div>', // replaced by HTML template during build. see Gulpfile.js
       data: function () {
         return {
           action: {
@@ -175,17 +175,19 @@
 
     function _addMessage(_msg) {
 
-      if(!_msg.content) {
+      if(!_msg.loading && !_msg.content) {
         throw Error('BotUI: "content" is required in message object.');
       }
 
       _msg.type = _msg.type || 'text';
-      _msg.visible = _msg.delay ? false : true;
+      _msg.visible = (_msg.delay || _msg.loading) ? false : true;
       var _index = _instance.messages.push(_msg) - 1;
 
       return new Promise(function (resolve, reject) {
         setTimeout(function () {
-          _instance.messages[_index].visible = true;
+          if(_msg.delay && !_msg.loading) { // if its a loading message then only do in 'update'
+            _instance.messages[_index].visible = true;
+          }
           resolve(_index);
         }, _msg.delay || 0);
       });
@@ -221,7 +223,9 @@
         return Promise.resolve();
       },
       update: function (index, msg) { // only content can be updated, not the message type.
-        _instance.messages[index].content = msg.content;
+        var _msg = _instance.messages[index];
+        _msg.content = msg.content;
+        _msg.visible = !msg.loading;
         return Promise.resolve(msg.content);
       },
       removeAll: function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "botui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A JS library to build the UI for your bot",
   "main": "build/botui.min.js",
   "devDependencies": {

src/botui.html

@@ -7,9 +7,9 @@
           <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe>
         </div>
         <div v-else class="botui-message-content loading">
-          <div class="dot"></div>
-          <div class="dot"></div>
-          <div class="dot"></div>
+          <i class="dot"></i>
+          <i class="dot"></i>
+          <i class="dot"></i>
         </div>
       </transition>
     </div>

src/scripts/botui.js

@@ -166,17 +166,19 @@
 
     function _addMessage(_msg) {
 
-      if(!_msg.content) {
+      if(!_msg.loading && !_msg.content) {
         throw Error('BotUI: "content" is required in message object.');
       }
 
       _msg.type = _msg.type || 'text';
-      _msg.visible = _msg.delay ? false : true;
+      _msg.visible = (_msg.delay || _msg.loading) ? false : true;
       var _index = _instance.messages.push(_msg) - 1;
 
       return new Promise(function (resolve, reject) {
         setTimeout(function () {
-          _instance.messages[_index].visible = true;
+          if(_msg.delay && !_msg.loading) { // if its a loading message then only do in 'update'
+            _instance.messages[_index].visible = true;
+          }
           resolve(_index);
         }, _msg.delay || 0);
       });
@@ -212,7 +214,9 @@
         return Promise.resolve();
       },
       update: function (index, msg) { // only content can be updated, not the message type.
-        _instance.messages[index].content = msg.content;
+        var _msg = _instance.messages[index];
+        _msg.content = msg.content;
+        _msg.visible = !msg.loading;
         return Promise.resolve(msg.content);
       },
       removeAll: function () {

test.html

@@ -9,21 +9,32 @@
 <body>
   <div class="botui-app-container" id="hello-world">
     <bot-ui></bot-ui>
-  </div> 
+  </div>
   <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
   <script src="build/botui.js"></script>
   <script>
     var botui = new BotUI('hello-world');
 
     botui.message.add({
-      content: 'Hello World from bot!',
-      delay: 3000
+      loading: true
+    }).then(function (index) {
+      setTimeout(function () {
+        botui.message.update(index, {
+          content: 'Hello World from bot!',
+          loading: false
+        }).then(function () {
+          botui.message.add({
+            delay: 2000,
+            content: 'Delayed Hello World'
+          });
+        });
+      }, 5000);
     });
 
     botui.message.add({
       human: true,
       content: 'Hello World from human!'
-    });  
+    });
   </script>
 
 </body>