1 files changed, 22 insertions, 0 deletions
diff --git a/packages/frontend/src/directives/appear.ts b/packages/frontend/src/directives/appear.ts
new file mode 100644
index 0000000000..7fa43fc34a
--- /dev/null
+++ b/packages/frontend/src/directives/appear.ts
@@ -0,0 +1,22 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const fn = binding.value;
+		if (fn == null) return;
+
+		const observer = new IntersectionObserver(entries => {
+			if (entries.some(entry => entry.isIntersecting)) {
+				fn();
+			}
+		});
+
+		observer.observe(src);
+
+		src._observer_ = observer;
+	},
+
+	unmounted(src, binding, vn) {
+		if (src._observer_) src._observer_.disconnect();
+	},
+} as Directive;