Player/world list skeletons

src/components/Sidebar.vue

@@ -166,6 +166,14 @@ export default defineComponent({
 			overflow: auto;
 			will-change: transform;
 		}
+
+		.section__skeleton {
+			font-style: italic;
+			color: #aaa;
+			text-align: center;
+			align-self: center;
+			margin-top: 1rem;
+		}
 	}
 
 	@media (max-width: 30rem) {

src/components/sidebar/PlayerList.vue

@@ -19,6 +19,9 @@
 		<span class="section__heading">{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</span>
 		<ul class="section__content">
 			<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
+			<li v-if="!players.size" class="section__skeleton">
+				No players are currently online
+			</li>
 		</ul>
 	</section>
 </template>

src/components/sidebar/WorldList.vue

@@ -19,6 +19,9 @@
 		<span class="section__heading">{{ heading }}</span>
 		<ul class="section__content">
 			<WorldListItem :world="world" v-for="[name, world] in worlds" :key="name"></WorldListItem>
+			<li v-if="!worlds.size" class="section__skeleton">
+				No maps have been configured
+			</li>
 		</ul>
 	</section>
 </template>