Merge pull request #1546 from pixelfed/frontend-ui-refactor

Update LoopComponent

resources/assets/js/components/LoopComponent.vue

@@ -1,5 +1,9 @@
 <template>
-	<div>
+	<div class="w-100 h-100">
+		<div v-if="loading" style="min-height: 400px;" class="d-flex justify-content-center align-items-center">
+			<img src="/img/pixelfed-icon-grey.svg" class="">
+		</div>
+		<div v-else>
 			<div class="mb-4">
 				<p class="text-center">
 					<!-- <a :class="[tab == 'popular'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('popular')">Popular</a> -->
@@ -15,7 +19,9 @@
 							<video class="embed-responsive-item" :src="videoSrc(loop)" preload="none" width="100%" height="100%" loop @click="toggleVideo(loop, $event)" :poster="posterSrc(loop)"></video>
 						</div>
 						<div class="card-body">
-						<p class="username font-weight-bolder lead d-flex justify-content-between"><a :href="loop.account.url">{{loop.account.acct}}</a> <a :href="loop.url">{{timestamp(loop)}}</a></p>
+							<p class="username font-weight-bolder lead d-flex justify-content-between">
+								<a :href="loop.account.url" :title="loop.account.acct">{{truncate(loop.account.acct)}}</a> 
+								<a :href="loop.url">{{timestamp(loop)}}</a></p>
 							<p class="small text-muted text-truncate" v-html="getTitle(loop)"></p>
 							<div class="small text-muted d-flex justify-content-between mb-0">
 								<span>{{loop.favourites_count}} Likes</span>
@@ -34,6 +40,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <style type="text/css">
@@ -61,9 +68,10 @@ Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
 export default {
 	data() {
 		return {
-			'version': 1,
-			'loops': [],
-			'tab': 'new'
+			loading: true,
+			version: 1,
+			loops: [],
+			tab: 'new'
 		}
 	},
 
@@ -71,6 +79,7 @@ export default {
 		axios.get('/api/v2/loops')
 			.then(res => {
 				this.loops = res.data;
+				this.loading = false;
 			})
 	}, 
 
@@ -112,6 +121,9 @@ export default {
 		getTitle(loop) {
 			let content = loop.content ? loop.content : 'Untitled';
 			return content.trim();
+		},
+		truncate(str, len = 15) {
+			return _.truncate(str, {length: len});
 		}
 	}
 }