@@ -30,6 +30,7 @@ const state = reactive({
3030 errors: ' ' ,
3131 result: null ,
3232 validated: false ,
33+ validating: false ,
3334 view: ' preview'
3435})
3536
@@ -73,6 +74,9 @@ function setExample() {
7374}
7475
7576function validate() {
77+ state .validating = true
78+ state .validated = false
79+
7680 const body = {
7781 format: props .schema .format ,
7882 schema: props .schema .schema ,
@@ -102,6 +106,7 @@ function validate() {
102106 }))
103107 }
104108 }).then (({ status , body }) => {
109+ state .validating = false
105110 state .validated = true
106111
107112 if (status === 500 ) {
@@ -193,8 +198,9 @@ function formatResultItem(result: any): [string, number] {
193198 <div class =" modal-footer justify-content-between" >
194199 <span class =" float-start" >
195200 <span class =" status" role =" status" >
196- <i v-if =" state.errors.length == 0 && state.result == null && state.validated" class =" valid bi bi-check-circle-fill" > Valid</i >
197- <i v-else-if =" state.validated" class =" failed bi bi-x-circle-fill" > Failed</i >
201+ <span v-if =" state.validating" class =" loading" ><i class =" bi bi-arrow-repeat spin" ></i > Validating...</span >
202+ <i v-else-if =" state.errors.length == 0 && state.result == null && state.validated" class =" valid bi bi-check-circle-fill fade-in" > Valid</i >
203+ <i v-else-if =" state.validated" class =" failed bi bi-x-circle-fill fade-in" > Failed</i >
198204 </span >
199205 </span >
200206 <div class =" float-end" >
@@ -222,4 +228,22 @@ function formatResultItem(result: any): [string, number] {
222228.modal-footer .status .failed {
223229 color : var (--color-red );
224230}
231+ .modal-footer .status .loading {
232+ color : var (--color-blue );
233+ }
234+ .spin {
235+ display : inline-block ;
236+ animation : spin 1s linear infinite ;
237+ }
238+ @keyframes spin {
239+ from { transform : rotate (0deg ); }
240+ to { transform : rotate (360deg ); }
241+ }
242+ .fade-in {
243+ animation : fadeIn 0.5s ease-in-out ;
244+ }
245+ @keyframes fadeIn {
246+ from { opacity : 0 ; }
247+ to { opacity : 1 ; }
248+ }
225249 </style >
0 commit comments