Move loading-message to it's own component, add fade transition class, add transition tag to moderation pages

src/assets/scss/elementStyles.scss

@@ -217,4 +217,17 @@ b, strong {
 		font-size: 4rem;
 		color: $color__gray--darker;
 	}
+
+	@at-root #{&}__loading {
+		margin-top: 2rem;
+		margin-bottom: 0.5rem;
+	}
+}
+
+//Vue transition class
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to {
+	opacity: 0;
 }

src/components/LoadingMessage.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class='overlay_message'>
+		<span class='overlay_message__loading'>
+			<loading-icon :dark='true'></loading-icon>
+		</span>
+		Loading...
+	</div>
+</template>
+
+<script>
+	import LoadingIcon from './LoadingIcon'
+
+	export default {
+		name: 'LoadingMessage',
+		components: { LoadingIcon }
+	}
+</script>

src/components/routes/AdminModerationBannedUsers.vue

@@ -5,37 +5,41 @@
 			<button class='button button--blue' @click='toggleShowAddNewBanModal'>Add new ban</button>
 		</div>
 
-		<table class='admin_moderation__table' v-if='bans.length'>
-			<tr>
-				<th>User</th>
-				<th>Ban type</th>
-				<th>Date banned</th>
-				<th>Message</th>
-				<th>Action</th>
-			</tr>
-			<tr v-for='(ban, $index) in bans'>
-				<td>{{ban.User.username}}</td>
-				<td>{{ban.type}}</td>
-				<td>{{ban.createdAt | formatDate}}</td>
-				<td>
-					<template v-if='ban.message'>{{ban.message}}</template>
-					<i v-else>No message given</i>
-				</td>
-				<td>
-					<button
-						class='button button--red'
-						@click='deleteBan(ban, $index)'
-					>
-						Delete ban
-					</button>
-				</td>
-			</tr>
-		</table>
-
-		<div class='overlay_message' v-else>
-			<span class='fa fa-thumbs-up'></span>
-			No banned users
-		</div>
+		<transition name='fade' mode='out-in'>
+			<loading-message v-if='!bans' key='loading'></loading-message>
+
+			<table class='admin_moderation__table' v-else-if='bans.length' key='bans'>
+				<tr>
+					<th>User</th>
+					<th>Ban type</th>
+					<th>Date banned</th>
+					<th>Message</th>
+					<th>Action</th>
+				</tr>
+				<tr v-for='(ban, $index) in bans'>
+					<td>{{ban.User.username}}</td>
+					<td>{{ban.type}}</td>
+					<td>{{ban.createdAt | formatDate}}</td>
+					<td>
+						<template v-if='ban.message'>{{ban.message}}</template>
+						<i v-else>No message given</i>
+					</td>
+					<td>
+						<button
+							class='button button--red'
+							@click='deleteBan(ban, $index)'
+						>
+							Delete ban
+						</button>
+					</td>
+				</tr>
+			</table>
+
+			<div class='overlay_message' v-else key='no bans'>
+				<span class='fa fa-thumbs-up'></span>
+				No banned users
+			</div>
+		</transition>
 
 		<modal-window v-model='$store.state.moderation.showAddNewBanModal' width='30rem'>
 			<div class='admin_moderation__add_new_ban_modal'>
@@ -95,6 +99,7 @@
 	import ConfirmModal from '../ConfirmModal'
 	import ModerationHeader from '../ModerationHeader'
 	import LoadingIcon from '../LoadingIcon'
+	import LoadingMessage from '../LoadingMessage'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
@@ -109,16 +114,19 @@
 			AvatarIcon,
 			ConfirmModal,
 			ModerationHeader,
-			LoadingIcon
+			LoadingIcon,
+			LoadingMessage
 		},
 		data () {
 			return {
 				loading: false,
-				bans_: []
+				bans_: null
 			}
 		},
 		computed: {
 			bans () {
+				if(!this.bans_) return null
+
 				return this.bans_.map(ban => {
 					if(ban.ipBanned) {
 						ban.type = 'IP banned'

src/components/routes/AdminModerationReports.vue

@@ -6,53 +6,62 @@
 			Are you sure you want to remove this post?
 		</confirm-modal>
 
-		<div class='admin_moderation__reports' v-if='reports.length'>
-
-			<div class='admin_moderation__report admin_moderation__report--header'>
-				<div class='admin_moderation__report__post admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
-					Post and thread reported
-				</div>
-				<div class='admin_moderation__report__reason admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>Report reason</div>
-				<div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
-					Reported by user
-				</div>
-				<div class='admin_moderation__report__actions'>
-					Actions
-				</div>
-			</div>				
-
-			<div class='admin_moderation__report' v-for='(report, $index) in reports'>
-				<div class='admin_moderation__report__post admin_moderation__report--cell_border'>
-					<div class='admin_moderation__report__post__header'>
-						<div class='admin_moderation__report__post__thread'>{{report.Post.Thread.name}}</div>
-						<div class='admin_moderation__report__post__user'>{{report.Post.User.username}}</div>
+		<transition name='fade' mode='out-in'>
+			<loading-message v-if='!reports' key='loading'></loading-message>
+
+			<div
+				class='admin_moderation__reports'
+				v-else-if='reports.length'
+				key='reports'
+			>
+
+				<div class='admin_moderation__report admin_moderation__report--header'>
+					<div class='admin_moderation__report__post admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
+						Post and thread reported
 					</div>
-					<div class='admin_moderation__report__post__content'>{{report.Post.content | stripTags | truncate(150)}}</div>
-				</div>
-				<div class='admin_moderation__report__reason admin_moderation__report--cell_border'>{{report.reason}}</div>
-				<div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border'>
-					<avatar-icon class='admin_moderation__report__flagged_by__avatar' :user='report.FlaggedByUser'></avatar-icon>
-					<div class='admin_moderation__report__flagged_by__text_info'>
-						<div class='admin_moderation__report__flagged_by__user'>{{report.FlaggedByUser.username}}</div>
-						<div class='admin_moderation__report__flagged_by__date'>{{report.createdAt| formatDate}}</div>
+					<div class='admin_moderation__report__reason admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>Report reason</div>
+					<div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border admin_moderation__report--cell_border-hidden'>
+						Reported by user
+					</div>
+					<div class='admin_moderation__report__actions'>
+						Actions
+					</div>
+				</div>				
+
+				<div class='admin_moderation__report' v-for='(report, $index) in reports'>
+					<div class='admin_moderation__report__post admin_moderation__report--cell_border'>
+						<div class='admin_moderation__report__post__header'>
+							<div class='admin_moderation__report__post__thread'>{{report.Post.Thread.name}}</div>
+							<div class='admin_moderation__report__post__user'>{{report.Post.User.username}}</div>
+						</div>
+						<div class='admin_moderation__report__post__content'>{{report.Post.content | stripTags | truncate(150)}}</div>
+					</div>
+					<div class='admin_moderation__report__reason admin_moderation__report--cell_border'>{{report.reason}}</div>
+					<div class='admin_moderation__report__flagged_by admin_moderation__report--cell_border'>
+						<avatar-icon class='admin_moderation__report__flagged_by__avatar' :user='report.FlaggedByUser'></avatar-icon>
+						<div class='admin_moderation__report__flagged_by__text_info'>
+							<div class='admin_moderation__report__flagged_by__user'>{{report.FlaggedByUser.username}}</div>
+							<div class='admin_moderation__report__flagged_by__date'>{{report.createdAt| formatDate}}</div>
+						</div>
+					</div>
+					<div class='admin_moderation__report__actions'>
+						<button class='button button--red' @click='removePost(report, $index)'>Remove post</button>
+						<menu-button
+							@delete='deleteReport(report.id, $index)'
+							@ban='banUser(report, $index)'
+							:options='reportMenuOptions'
+						>
+							<button class='button'>More options&hellip;</button>
+						</menu-button>
 					</div>
 				</div>
-				<div class='admin_moderation__report__actions'>
-					<button class='button button--red' @click='removePost(report, $index)'>Remove post</button>
-					<menu-button
-						@delete='deleteReport(report.id, $index)'
-						@ban='banUser(report, $index)'
-						:options='reportMenuOptions'
-					>
-						<button class='button'>More options&hellip;</button>
-					</menu-button>
-				</div>
 			</div>
-		</div>
-		<div class='overlay_message' v-else>
-			<span class='fa fa-thumbs-up'></span>
-			No user reports
-		</div>
+
+			<div class='overlay_message' v-else key='no reports'>
+				<span class='fa fa-thumbs-up'></span>
+				No user reports
+			</div>
+		</transition>
 	</div>
 </template>
 
@@ -62,6 +71,7 @@
 	import FancyInput from '../FancyInput'
 	import SelectButton from '../SelectButton'
 	import MenuButton from '../MenuButton'
+	import LoadingMessage from '../LoadingMessage'
 	import AvatarIcon from '../AvatarIcon'
 	import ConfirmModal from '../ConfirmModal'
 	import ModerationHeader from '../ModerationHeader'
@@ -76,6 +86,7 @@
 			FancyInput,
 			SelectButton,
 			MenuButton,
+			LoadingMessage,
 			AvatarIcon,
 			ConfirmModal,
 			ModerationHeader
@@ -87,7 +98,7 @@
 					{ value: "Ban or block user", event: 'ban' },
 					{ value: "Remove thread" }
 				],
-				reports: [],
+				reports: null,
 
 				removePostObj: {
 					showConfirmModal: false,