diff --git a/client/src/App.svelte b/client/src/App.svelte
index b4ade0f..bd985c9 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { onMount } from 'svelte';
+    import { event } from './store.js';
 	import List from './List.svelte';
 
-	let event;
 	let problum;
 
 	async function popstate() {
@@ -22,7 +22,7 @@
 					"id": id
 				};
 			}
-			if (new_event != event) {
+			if (new_event != $event) {
 				let r = await fetch(`/api/event/${new_event.id}`).catch((e) => {
 					problum = e;
 					// server is down, retry slowly
@@ -32,7 +32,7 @@
 				if (!r.ok) {
 					if (r.status >= 400 && r.status < 500) {
 						// our fault -- don't retry
-						event = null;
+						event.set(null)
 					} else {
 						// server is sad, retry slowly
 						setTimeout(popstate, 5000);
@@ -41,10 +41,10 @@
 					return;
 				}
 				problum = null;
-				event = new_event;
+				event.set(new_event)
 			}
 		} else {
-			event = null;
+			event.set(null);
 		}
 	}
 
@@ -84,9 +84,9 @@
 	</div>
 {/if}
 
-{#if event}
+{#if $event}
 	<main class="max-w-4xl mx-auto my-4 px-4">
-		<List {event} />
+		<List />
 		<div class="text-center text-slate-400 mt-4">
 			(
 			made
diff --git a/client/src/List.svelte b/client/src/List.svelte
index fbd3e5a..004891e 100644
--- a/client/src/List.svelte
+++ b/client/src/List.svelte
@@ -1,53 +1,20 @@
 <script>
-	import { onMount } from "svelte";
 	import Question from "./Question.svelte";
-	import { votedFor, localAdjustments } from './store.js';
+	import { rawQuestions, localAdjustments, votedFor,  questions, event } from './store.js';
+    import { poll_time, animationTime } from "./helpers";
 	import { flip } from 'svelte/animate';
+	import { scale, slide } from 'svelte/transition';
 
-	export let event;
-
-	let inactive_hits = 0;
-	function poll_time(e) {
-		if (document.hidden) {
-			// if the tab is hidden, no need to refresh so often
-			// if it's been hidden for a while, even less so
-			// we could stop refreshing altogether, and just
-			// refresh when we're visible again (i.e., on
-			// visibilitychange), but it's nice if things don't
-			// jump around too much when that happens.
-			inactive_hits += 1;
-			if (inactive_hits <= 10 /* times 30s */) {
-				// For the first 5 minutes, poll every 30s
-				return 30 * 1000;
-			} else if (inactive_hits <= 25 /* -10 times 60s */ ) {
-				// For the next 15 minutes, poll every 60s
-				return 60 * 1000;
-			} else {
-				// At this point, the user probably won't
-				// return to the tab for a while, so we can
-				// update _very_ rarely.
-				return 20 * 60 * 1000;
-			}
-		}
-
-		inactive_hits = 0;
-		if (e.secret) {
-			// hosts should get relatively frequent updates
-			return 3000;
-		} else {
-			// guests can wait
-			return 10000;
-		}
-	}
 
 	function visibilitychange() {
 		// immediately refresh when we become visible
 		if (!document.hidden) {
-			event = event;
+			event.set($event);
 		}
 	}
 
 	let interval;
+	let problum;
 	async function loadQuestions(e) {
 		if (interval) {
 			clearTimeout(interval);
@@ -55,13 +22,17 @@
 		let next = poll_time(e);
 		console.info("refresh; next in", next, "ms");
 		// set early so we'll retry even if request fails
-		interval = setTimeout(() => {event = event;}, next);
+		interval = setTimeout(() => {event.set(e)}, next);
 		let url = e.secret
 			? `/api/event/${e.id}/questions/${e.secret}`
 			: `/api/event/${e.id}/questions`;
 		let r = await fetch(url);
 		if (!r.ok) {
 			console.error(r);
+            problum = r;
+            if (r.status === 404) {
+                rawQuestions.set(null);
+            }
 			if (r.status >= 400 && r.status < 500) {
 				// it's our fault. most likely, the event
 				// doesn't exist (or has since been deleted),
@@ -73,134 +44,35 @@
 			}
 			throw r;
 		}
+        problum = null;
 		if (interval) {
 			clearTimeout(interval);
 		}
 		// re-set timeout so we count from when the reload actually happened
-		interval = setTimeout(() => {event = event;}, next);
-		return await r.json();
-	}
-
-	// XXX: this ends up doing _two_ loads when the page initially opens
-	//      not sure why...
-	let rawQuestions;
-	$: loadQuestions(event).then((qs) => {
-		rawQuestions = qs;
-		problum = null;
-	}).catch((r) => {
-		if (r.status === 404) {
-			rawQuestions = null;
-			problum = r;
-		} else {
-			// leave questions and just highlight (hopefully
-			// temporary) error.
-			problum = r;
-		}
-	});
-
-	// because of caching, we may receive a list of questions from the
-	// server that doesn't reflect changes we've made (voting, asking new
-	// questions, toggling hidden/answered). that's _very_ confusing.
-	// so, we keep track of every change we make and re-apply it onto what
-	// we get from the server until we observe the change in the server's
-	// response.
-	function adjustQuestions(rq, la, vf) {
-		if (rq === null || rq === undefined) {
-			return rq;
-		}
-		// deep-ish clone so we don't modify rawQuestions
-		let qs = rq.map((q) => Object.assign({}, q));
-
-		let removed = false;
-		let nowPresent = {};
-		for (const q of qs) {
-			for (const newQ of la.newQuestions) {
-				if (q.qid === newQ) {
-					console.debug("no longer need to add", newQ);
-					nowPresent[newQ] = true;
-				}
-			}
-		}
-		if (la.newQuestions.length > 0 || Object.keys(la.remap).length > 0) {
-			console.log("question list needs local adjustments");
-			let changed = Object.keys(nowPresent).length > 0;
-			la.newQuestions = la.newQuestions.filter((qid) => !(qid in nowPresent));
-			for (const newQ of la.newQuestions) {
-				console.info("add in", newQ);
-				qs.push({
-					"qid": newQ,
-					"hidden": false,
-					"answered": false,
-					"votes": 1,
-				});
-			}
-			for (let i = 0; i < qs.length; i++) {
-				let q = qs[i];
-				let qid = q.qid;
-				let adj = la.remap[qid];
-				if (!adj) {
-					continue;
-				}
-				console.debug("augment", qid);
-				if ("hidden" in adj) {
-					if (q.hidden === adj.hidden) {
-						console.debug("no longer need to adjust hidden");
-						delete la.remap[qid]["hidden"];
-						changed = true;
-					} else {
-						console.info("adjust hidden to", adj.hidden);
-						qs[i].hidden = adj.hidden;
-					}
-				}
-				if ("answered" in adj) {
-					if (q.answered === adj.answered) {
-						console.debug("no longer need to adjust answered");
-						delete la.remap[qid]["answered"];
-						changed = true;
-					} else {
-						console.info("adjust answered to", adj.answered);
-						qs[i].answered = adj.answered;
-					}
-				}
-				if ("voted_when" in adj) {
-					if (q.votes === adj.voted_when) {
-						console.info("adjust vote count from", q.votes);
-						// our vote likely isn't represented
-						if (vf[qid]) {
-							console.debug("adjust up");
-							qs[i].votes += 1;
-						} else {
-							console.debug("adjust down");
-							qs[i].votes -= 1;
-						}
-					} else {
-						console.debug("vote count has been updated from", adj.voted_when, "to", q.votes);
-						delete la.remap[qid]["voted_when"];
-						changed = true;
-					}
-				}
-				if (Object.keys(la.remap[qid]).length === 0) {
-					console.debug("no more adjustments");
-					delete la.remap[qid];
-					changed = true;
-				}
-			}
-			if (changed) {
-				console.log("local adjustments changed");
-				localAdjustments.set(la);
-			}
-		}
-		qs.sort((a, b) => { return b.votes - a.votes; });
-		return qs;
+		interval = setTimeout(() => {event.set(e)}, next);
+		rawQuestions.set(await r.json());
 	}
-
-
-	$: questions = adjustQuestions(rawQuestions, $localAdjustments, $votedFor);
-	let problum;
-	$: unanswered = (questions || []).filter((q) => !q.answered && !q.hidden)
-	$: answered = (questions || []).filter((q) => q.answered && !q.hidden)
-	$: hidden = (questions || []).filter((q) => q.hidden)
-
+    event.subscribe(loadQuestions);
+
+    // Not sure how the $: syntax works with stores, so to be on the safe side
+    // i'm doing an explicit subscribe
+    let unanswered = [];
+	let answered = []; 
+	let hidden = [];
+    let last = new Date();
+    questions.subscribe((qs) => {
+        // Noop means no there are no new updates
+        if (qs === "noop") return;
+        let now = new Date();
+        console.log(`Redraw request after: ${now.getTime() - last.getTime()}ms`);
+        last = now;
+        unanswered = qs.filter((q) => !q.answered && !q.hidden)
+	    answered = qs.filter((q) => q.answered && !q.hidden)
+	    hidden = qs.filter((q) => q.hidden)
+    })
+    $: disableLastOut = unanswered.length === 1
+
+	
 	async function ask() {
 		let q;
 		while (true) {
@@ -219,7 +91,7 @@
 		    who = null;
 		}
 		// TODO: handle error
-		let resp = await fetch(`/api/event/${event.id}`, {
+		let resp = await fetch(`/api/event/${$event.id}`, {
 			"method": "POST",
 			"headers": {
 				'Content-Type': 'application/json',
@@ -245,7 +117,7 @@
 	let reset;
 	async function share(e) {
 		let url = window.location + "";
-		url = url.substring(0, url.length - event.secret.length - 1);
+		url = url.substring(0, url.length - $event.secret.length - 1);
 		await navigator.clipboard.writeText(url);
 		e.target.textContent = "📋 Link copied!";
 		if (reset) {
@@ -262,7 +134,7 @@
 
 {#if questions}
 	<div class="text-center">
-	{#if event.secret}
+	{#if $event.secret}
 		<button class="border p-4 px-8 bg-orange-700 text-white font-bold border-2 border-red-100 hover:border-red-400" on:click={share}>{share_text}</button>
 		<div class="text-slate-400 pt-4">
 			The URL in your address bar shares the host view.<br />
@@ -289,14 +161,21 @@
 	<section class="pt-4">
 	{#if unanswered.length > 0}
 		<div class="flex flex-col divide-y">
-		{#each unanswered as question (question.qid)}
-			<div animate:flip="{{duration: 500}}">
-			<Question {event} bind:question={question} />
-			</div>
-		{/each}
-		</div>
+             {#if disableLastOut}
+                 <Question bind:question={unanswered[0]} />
+             {:else}
+                 {#each unanswered as question (question.qid)}
+                     <div
+                         out:slide={{ duration: animationTime }}
+                         animate:flip={{ duration: animationTime }}
+                     >
+                         <Question bind:question />
+                     </div>
+                 {/each}
+             {/if}
+	    </div>
 	{:else}
-		<h2 class="text-center text-slate-500 text-2xl my-8">
+		<h2 class="text-center text-slate-500 text-2xl my-12" in:scale={{ duration: animationTime }}>
 			{#if answered.length > 0}
 			No unanswered questions.
 			{:else}
@@ -312,20 +191,20 @@
 	</h2>
 	<div class="flex flex-col divide-y">
 	{#each answered as question (question.qid)}
-		<div animate:flip="{{duration: 500}}">
-		<Question {event} bind:question={question} />
+		<div animate:flip={{duration: animationTime}} out:slide={{ duration: animationTime }}>
+		<Question bind:question={question} />
 		</div>
 	{/each}
 	</div>
 	</section>
 	{/if}
-	{#if event.secret && hidden.length > 0}
+	{#if $event.secret && hidden.length > 0}
 	<section>
 	<h2 class="text-2xl text-center text-slate-400 dark:text-slate-500 mt-8 mb-4">Hidden</h2>
 	<div class="flex flex-col divide-y">
 	{#each hidden as question (question.qid)}
-		<div animate:flip="{{duration: 500}}">
-		<Question {event} bind:question={question} />
+		<div animate:flip={{duration: animationTime}} out:slide={{ duration: animationTime }}>
+		<Question bind:question={question} />
 		</div>
 	{/each}
 	</div>
diff --git a/client/src/Question.svelte b/client/src/Question.svelte
index ae966a6..4e0c211 100644
--- a/client/src/Question.svelte
+++ b/client/src/Question.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { onMount } from 'svelte';
-	import {votedFor, questionCache, questionData, localAdjustments} from './store.js';
+	import {votedFor, questionCache, questionData, localAdjustments, event} from './store.js';
 
 	export let question;
-	export let event;
 
 	let now = new Date();
+    // QUESTION: Instead of registering this for each questions, it might be less
+    // resource intensive to have a single `readable` timer store that questions 
+    // could subscribe to. Thoughts?
 	onMount(() => {
 		const interval = setInterval(() => {
 			now = new Date();
@@ -50,7 +52,7 @@
 	}
 
 	async function toggle(what) {
-		await fetch(`/api/event/${event.id}/questions/${event.secret}/${question.qid}/toggle/${what}`, {
+		await fetch(`/api/event/${$event.id}/questions/${$event.secret}/${question.qid}/toggle/${what}`, {
 			"method": "POST",
 			"body": question[what] ? "off" : "on",
 		});
@@ -118,7 +120,7 @@
 		{#if q.who}
 		<span>by {q.who}</span>
 		{/if}
-		{#if event.secret}
+		{#if $event.secret}
 			—
 			{#if question.answered}
 				<button on:click={answered}>Mark as not answered</button>
diff --git a/client/src/helpers.js b/client/src/helpers.js
new file mode 100644
index 0000000..1c01cec
--- /dev/null
+++ b/client/src/helpers.js
@@ -0,0 +1,171 @@
+import { localAdjustments } from './store.js'
+
+export const animationTime = 400;
+
+// Debounce implementaion
+// Implementation grabbed from: https://youmightnotneed.com/lodash#function
+export const debounce = (func, delay, { leading } = { leading: true }) => {
+    let timerId
+
+    return (...args) => {
+        if (!timerId && leading) {
+            func(...args)
+        }
+        clearTimeout(timerId)
+
+        timerId = setTimeout(() => func(...args), delay)
+    }
+}
+
+// Thought I would test out ChatGPT for this, since it seems like it would 
+// likely be in its dataset. There are some clear limitations/edge cases 
+// this function doesn't handle, but in our case the objects/arrays won't
+// encounter them
+export function deepEqual(a, b) {
+    if (a === b) return true;
+
+    if (a == null || typeof a != "object" ||
+        b == null || typeof b != "object") return false;
+
+    let keysA = Object.keys(a), keysB = Object.keys(b);
+
+    if (keysA.length != keysB.length) return false;
+
+    for (let key of keysA) {
+        if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
+    }
+
+    return true;
+}
+
+
+let inactive_hits = 0;
+export function poll_time(e) {
+    if (document.hidden) {
+        // if the tab is hidden, no need to refresh so often
+        // if it's been hidden for a while, even less so
+        // we could stop refreshing altogether, and just
+        // refresh when we're visible again (i.e., on
+        // visibilitychange), but it's nice if things don't
+        // jump around too much when that happens.
+        inactive_hits += 1;
+        if (inactive_hits <= 10 /* times 30s */) {
+            // For the first 5 minutes, poll every 30s
+            return 30 * 1000;
+        } else if (inactive_hits <= 25 /* -10 times 60s */) {
+            // For the next 15 minutes, poll every 60s
+            return 60 * 1000;
+        } else {
+            // At this point, the user probably won't
+            // return to the tab for a while, so we can
+            // update _very_ rarely.
+            return 20 * 60 * 1000;
+        }
+    }
+
+    inactive_hits = 0;
+    if (e.secret) {
+        // hosts should get relatively frequent updates
+        return 3000;
+    } else {
+        // guests can wait
+        return 10000;
+    }
+}
+
+// because of caching, we may receive a list of questions from the
+// server that doesn't reflect changes we've made (voting, asking new
+// questions, toggling hidden/answered). that's _very_ confusing.
+// so, we keep track of every change we make and re-apply it onto what
+// we get from the server until we observe the change in the server's
+// response.
+export function adjustQuestions(rq, la, vf) {
+    if (rq === null || rq === undefined) {
+        return rq;
+    }
+    // deep-ish clone so we don't modify rawQuestions
+    let qs = rq.map((q) => Object.assign({}, q));
+
+    let nowPresent = {};
+    for (const q of qs) {
+        for (const newQ of la.newQuestions) {
+            if (q.qid === newQ) {
+                console.debug("no longer need to add", newQ);
+                nowPresent[newQ] = true;
+            }
+        }
+    }
+    if (la.newQuestions.length > 0 || Object.keys(la.remap).length > 0) {
+        console.log("question list needs local adjustments");
+        let changed = Object.keys(nowPresent).length > 0;
+        la.newQuestions = la.newQuestions.filter((qid) => !(qid in nowPresent));
+        for (const newQ of la.newQuestions) {
+            console.info("add in", newQ);
+            qs.push({
+                "qid": newQ,
+                "hidden": false,
+                "answered": false,
+                "votes": 1,
+            });
+        }
+        for (let i = 0; i < qs.length; i++) {
+            let q = qs[i];
+            let qid = q.qid;
+            let adj = la.remap[qid];
+            if (!adj) {
+                continue;
+            }
+            console.debug("augment", qid);
+            if ("hidden" in adj) {
+                if (q.hidden === adj.hidden) {
+                    console.debug("no longer need to adjust hidden");
+                    delete la.remap[qid]["hidden"];
+                    changed = true;
+                } else {
+                    console.info("adjust hidden to", adj.hidden);
+                    qs[i].hidden = adj.hidden;
+                }
+            }
+            if ("answered" in adj) {
+                if (q.answered === adj.answered) {
+                    console.debug("no longer need to adjust answered");
+                    delete la.remap[qid]["answered"];
+                    changed = true;
+                } else {
+                    console.info("adjust answered to", adj.answered);
+                    qs[i].answered = adj.answered;
+                }
+            }
+            if ("voted_when" in adj) {
+                if (q.votes === adj.voted_when) {
+                    console.info("adjust vote count from", q.votes);
+                    // our vote likely isn't represented
+                    if (vf[qid]) {
+                        console.debug("adjust up");
+                        qs[i].votes += 1;
+                    } else {
+                        console.debug("adjust down");
+                        qs[i].votes -= 1;
+                    }
+                } else {
+                    console.debug("vote count has been updated from", adj.voted_when, "to", q.votes);
+                    delete la.remap[qid]["voted_when"];
+                    changed = true;
+                }
+            }
+            if (Object.keys(la.remap[qid]).length === 0) {
+                console.debug("no more adjustments");
+                delete la.remap[qid];
+                changed = true;
+            }
+        }
+        if (changed) {
+            console.log("local adjustments changed");
+            localAdjustments.set(la);
+        }
+    }
+    qs.sort((a, b) => { return b.votes - a.votes; });
+    return qs;
+}
+
+
diff --git a/client/src/store.js b/client/src/store.js
index abc50a7..091b8ee 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -1,4 +1,5 @@
-import { writable } from "svelte/store";
+import { writable, derived } from "svelte/store";
+import { adjustQuestions, animationTime, debounce, deepEqual } from "./helpers";
 
 const storedVotedFor = JSON.parse(localStorage.getItem("votedFor"));
 export const votedFor = writable(!storedVotedFor ? {} : storedVotedFor);
@@ -13,12 +14,12 @@ votedFor.subscribe(value => {
 const storedLocalAdjustments = JSON.parse(localStorage.getItem("localAdjustments"));
 export const localAdjustments = writable(!storedLocalAdjustments ? {
     "newQuestions": [
-	    // qid
+        // qid
     ],
     "remap": {
-	    // qid => { hidden: bool, answered: bool, voted_when: int }
+        // qid => { hidden: bool, answered: bool, voted_when: int }
     }
-} : storedLocalAdjustments );
+} : storedLocalAdjustments);
 localAdjustments.subscribe(value => {
     if (value) {
         localStorage.setItem("localAdjustments", JSON.stringify(value));
@@ -27,6 +28,26 @@ localAdjustments.subscribe(value => {
     }
 });
 
+export const event = writable(null);
+export const rawQuestions = writable(null);
+
+
+let prevQuestions = null;
+const debouncedQuestions = debounce(([$rq, $la, $vf], set) => {
+    const updated = adjustQuestions($rq, $la, $vf);
+    if (!deepEqual(updated, prevQuestions)) {
+        console.info("questions have been updated, triggering rerender");
+        set(updated);
+    }
+    prevQuestions = updated;
+}, animationTime + 100); // Give ourselves a little buffer since the animation won't start right away 
+
+// Svelte is doing some weird things here! This only works if the stores are passed like ([$rq, $la, $vf], set)
+// but stops working if we try to pass debouncedQuestions directly
+export const questions = derived([rawQuestions, localAdjustments, votedFor], ([$rq, $la, $vf], set) => {
+    debouncedQuestions([$rq, $la, $vf], set);
+}, "noop");
+
 const storedQs = JSON.parse(localStorage.getItem("questions"));
 export const questionCache = writable(!storedQs ? {} : storedQs);
 questionCache.subscribe(value => {