2 files changed, 80 insertions, 0 deletions
diff --git a/src/lib/layout/GlobalTooltip.svelte b/src/lib/layout/GlobalTooltip.svelte
new file mode 100644
index 0000000..aeb2027
--- /dev/null
+++ b/src/lib/layout/GlobalTooltip.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMouseMove, setTooltipEl } from '$lib/GlobalTooltip'
+
+	let tooltipEl: HTMLDivElement
+	$: setTooltipEl(tooltipEl)
+</script>
+
+<svelte:window on:mousemove={onMouseMove} />
+<div id="global-tooltip" style="display: none" bind:this={tooltipEl} />
+
+<style>
+	#global-tooltip {
+		position: absolute;
+		user-select: none;
+		pointer-events: none;
+		overflow: hidden;
+		z-index: 100;
+		background-color: #0a0a0aee;
+		padding: 0 0.25rem;
+		border-radius: 3px;
+		box-shadow: 0 0 0 3px #206, 0 0 0 6px #000;
+		font-family: Minecraft;
+		white-space: nowrap;
+	}
+	#global-tooltip :global(p) {
+		margin: 0;
+	}
+	#global-tooltip :global(.item-lore-name) {
+		margin-bottom: 0.5em;
+	}
+</style>
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
new file mode 100644
index 0000000..8347e16
--- /dev/null
+++ b/src/lib/layout/Loader.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	let progress = 0
+
+	let widthTransitionDuration = 1000
+
+	let opacity = 1
+	function navigationStart() {
+		console.log('navigation start')
+		widthTransitionDuration = 0
+		opacity = 1
+		progress = 0
+		requestAnimationFrame(() => {
+			widthTransitionDuration = 1000
+			progress = 1
+		})
+	}
+	function navigationEnd() {
+		console.log('navigation end', widthTransitionDuration)
+		opacity = 0
+		setTimeout(() => {
+			widthTransitionDuration = 0
+			progress = 0
+		}, 300)
+	}
+</script>
+
+<svelte:window
+	on:sveltekit:navigation-start={navigationStart}
+	on:sveltekit:navigation-end={navigationEnd}
+/>
+
+<div
+	id="loader"
+	style="width:{progress *
+		100}%;transition-duration:{widthTransitionDuration}ms,300ms;opacity:{opacity * 100}%"
+/>
+
+<style>
+	#loader {
+		position: fixed;
+		left: 0px;
+		top: 0px;
+		transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 100ms linear;
+		height: 8px;
+		z-index: 20;
+		/* add a faint glow effect */
+		background: -moz-linear-gradient(top, #16e 0%, #16e 50%, #16e5 50%, #16e0 100%);
+	}
+</style>