From f7b3c4d5511327e43e6022f051acc91eaa374e9d Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 26 Jan 2021 18:20:47 +0000
Subject: [PATCH] Lazily render PlayerList

---
 src/components/Sidebar.vue | 18 ++++++++++--------
 src/store/mutations.ts     |  5 +++++
 src/store/state.ts         |  2 ++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 64ae15b..8f9b04e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -17,21 +17,21 @@
 <template>
 	<aside class="sidebar">
 		<header class="sidebar__buttons">
-			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':visibleUIElements.has('maps')}"
+			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':currentlyVisible.has('maps')}"
 					@click="toggleElement('maps')" title="Map list" aria-label="Map list">
 				<SvgIcon name="maps"></SvgIcon>
 			</button>
-			<button :class="{'button--players': true, 'active': visibleUIElements.has('players')}"
+			<button :class="{'button--players': true, 'active': currentlyVisible.has('players')}"
 					@click="toggleElement('players')" title="Player list" aria-label="Player list">
 				<SvgIcon name="players"></SvgIcon>
 			</button>
-<!--			<button :class="{'button&#45;&#45;settings': true, 'active': visibleUIElements.has('settings'))}"-->
+<!--			<button :class="{'button&#45;&#45;settings': true, 'active': currentlyVisible.has('settings'))}"-->
 <!--					@click="toggleElement('settings')" title="Settings" aria-label="Settings">-->
 <!--				<SvgIcon name="settings"></SvgIcon>-->
 <!--			</button>-->
 		</header>
-		<WorldList v-if="mapCount > 1" v-show="visibleUIElements.has('maps')"></WorldList>
-		<PlayerList v-show="visibleUIElements.has('players')"></PlayerList>
+		<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
+		<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
 		<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
 	</aside>
 </template>
@@ -56,7 +56,8 @@ export default defineComponent({
 
 	setup() {
 		const store = useStore(),
-			visibleUIElements = computed(() => store.state.ui.visibleElements),
+			currentlyVisible = computed(() => store.state.ui.visibleElements),
+			previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
 			smallScreen = computed(() => store.state.ui.smallScreen),
 			mapCount = computed(() => store.state.maps.size),
 			following = computed(() => store.state.followTarget),
@@ -68,12 +69,13 @@ export default defineComponent({
 			followActive = computed(() => {
 				//Show following alongside playerlist on small screens
 				return (!smallScreen.value && following)
-					|| (smallScreen.value && visibleUIElements.value.has('players'));
+					|| (smallScreen.value && currentlyVisible.value.has('players'));
 			});
 
 		return {
 			mapCount,
-			visibleUIElements,
+			currentlyVisible,
+			previouslyVisible,
 			toggleElement,
 			followActive,
 			following,
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 55cc404..40375c1 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -425,6 +425,7 @@ export const mutations: MutationTree<State> & Mutations = {
 			state.ui.visibleElements.clear();
 		}
 
+		state.ui.previouslyVisibleElements.add(element);
 		newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element);
 	},
 
@@ -433,6 +434,10 @@ export const mutations: MutationTree<State> & Mutations = {
 			state.ui.visibleElements.clear();
 		}
 
+		if(payload.state || state.ui.visibleElements.has(payload.element)) {
+			state.ui.previouslyVisibleElements.add(payload.element);
+		}
+
 		payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
 	},
 
diff --git a/src/store/state.ts b/src/store/state.ts
index 2ce3eac..c4ded74 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -61,6 +61,7 @@ export type State = {
 	ui: {
 		smallScreen: boolean;
 		visibleElements: Set<DynmapUIElement>;
+		previouslyVisibleElements: Set<DynmapUIElement>;
 	};
 
 	parsedUrl: DynmapParsedUrl;
@@ -171,6 +172,7 @@ export const state: State = {
 	ui: {
 		smallScreen: false,
 		visibleElements:new Set(),
+		previouslyVisibleElements: new Set(),
 	},
 
 	parsedUrl: {