From b5ded3d8b2ea02bcd8f15d1801eb662c83674123 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 23 May 2022 11:52:50 +0100
Subject: [PATCH] Add fade to DND position indicators

---
 .../_components/navigation/DNDPositionIndicator.svelte          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
index 24b583901..c01bcaf36 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
@@ -1,5 +1,6 @@
 <script>
   import { DropPosition } from "./dndStore"
+  import { fade } from "svelte/transition"
 
   export let component
   export let position
@@ -28,6 +29,7 @@
 
 {#if component && position}
   <div
+    in:fade={{ duration: 130 }}
     class:above={position === DropPosition.ABOVE}
     class:below={position === DropPosition.BELOW}
     class:inside={position === DropPosition.INSIDE}