diff --git a/src/views/FinderBoard.vue b/src/views/FinderBoard.vue index 7a57bffc0a41a88e595b5544198307ba4fe96878..651ba50d56d450ccebf59fc94b3bff1d8ef7948b 100644 --- a/src/views/FinderBoard.vue +++ b/src/views/FinderBoard.vue @@ -36,10 +36,16 @@ </v-flex> <v-flex md12> <material-card color="green" title="발견 게시판" text="제목을 클릭하여 게시글을 확인하세요."> + <v-card :elevation="20" width="300" :shaped="true" v-if="dataLoading" class="mx-auto"> + <v-card-text> + <strong class="display-3 center">LOADING....</strong> + </v-card-text> + </v-card> <v-data-table + v-if="!dataLoading" :headers="headers" :items="items" - item-key="_id" + item-key="_id" loading-text="Loading..." :items-per-page="5" class="elevation-1" @@ -87,8 +93,8 @@ export default { items: [], search: '', loginDialog: false, - image:null - + image:null, + dataLoading: true }), created() { var log; @@ -100,11 +106,13 @@ export default { this.loginDialog = true; } else{ + this.dataLoading = true; this.items = response.data.finderboards; for(let i=0; i<this.items.length; i++){ var base64data=Buffer.from(this.items[i].image.data.data,'binary').toString('base64'); this.items[i].image='data:image/jpeg;base64,'+base64data; } + this.dataLoading = false; } }).catch(err => { alert("ERR while FET losterboard" + err) diff --git a/src/views/LosterBoard.vue b/src/views/LosterBoard.vue index a19cb5b6b7f029f3f7bb67371372ff20b0ad38c8..13e67e1473867667bc2fdbd87fd0ecd11863333c 100644 --- a/src/views/LosterBoard.vue +++ b/src/views/LosterBoard.vue @@ -36,7 +36,13 @@ </v-flex> <v-flex md12> <material-card color="green" title="실종 게시판" text="제목을 클릭하여 게시글을 확인하세요."> + <v-card :elevation="20" width="300" :shaped="true" v-if="dataLoading" class="mx-auto"> + <v-card-text> + <strong class="display-3 center">LOADING....</strong> + </v-card-text> + </v-card> <v-data-table + v-if="!dataLoading" :headers="headers" :items="items" item-key="_id" @@ -87,8 +93,8 @@ export default { items: [], search: '', loginDialog: false, - image:null - + image:null, + dataLoading: true }), created() { var log; @@ -100,14 +106,13 @@ export default { this.loginDialog = true; } else{ - this.$http.get('/losterboard') - .then(response => { - this.items = response.data.losterboards; - for(let i=0; i<this.items.length; i++){ - var base64data=Buffer.from(this.items[i].image.data.data,'binary').toString('base64'); - this.items[i].image='data:image/jpeg;base64,'+base64data; - } - }); + this.dataLoading = true; + this.items = response.data.losterboards; + for(let i=0; i<this.items.length; i++){ + var base64data=Buffer.from(this.items[i].image.data.data,'binary').toString('base64'); + this.items[i].image='data:image/jpeg;base64,'+base64data; + } + this.dataLoading = false; } }).catch(err => { alert("ERR while FET losterboard" + err)