add a spinner

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue

@@ -6,6 +6,8 @@
   </div>
 
   <div v-if="hasSocialIssuePicked">
+    <h2>{{ $t('pick_an_action') }}</h2>
+
     <vue-multiselect
       v-model="socialActionPicked"
       label="text"
@@ -17,11 +19,30 @@
     ></vue-multiselect> 
   </div>
 
+  <div v-if="isLoadingSocialActions">
+    <p>spinner</p>
+  </div>
+
   <div v-if="hasSocialActionPicked">
     <p><label>{{ $t('start_date') }}</label> <input type="date" v-model="startDate" /></p>
     <p><label>{{ $t('end_date') }}</label> <input type="date" v-model="endDate" /></p>
   </div>
 
+  <div >
+    <ul class="record_actions">
+      <li class="cancel">
+        <a href="#" class="sc-button bt-cancel">
+          {{ $t('Cancel') }}
+        </a>
+      </li>
+      <li v-if="hasSocialActionPicked">
+        <button class="sc-button bt-save" @click="submit">
+          {{ $t('Save') }}
+        </button>
+      </li>
+    </ul>
+  </div>
+
 </template>
 
 
@@ -35,6 +56,11 @@ export default {
   components: {
     VueMultiselect,
   },
+  methods: {
+    submit() {
+      this.$store.dispatch('submit');
+    }
+  },
   computed: {
     ...mapState([
       'socialIssues',
@@ -43,6 +69,7 @@ export default {
     ...mapGetters([
       'hasSocialIssuePicked',
       'hasSocialActionPicked',
+      'isLoadingSocialActions',
     ]),
     socialIssuePicked: {
       get() {