Refactor

.vscode/settings.json

@@ -12,6 +12,9 @@
     "prettier.requireConfig": false,
     "prettier.useEditorConfig": true,
     "stylelint.autoFixOnSave": true,
+    "search.exclude": {
+        "": true
+    }
     "[html]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
@@ -24,7 +27,8 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
     },
-    "search.exclude": {
-        "": true
-    }
+    "[markdown]": {
+        "editor.quickSuggestions": true,
+        "editor.wordBasedSuggestions": false
+    },
 }

package.json

@@ -15,7 +15,6 @@
   },
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
-    "@neoconfetti/svelte": "^2.2.1",
     "@playwright/test": "^1.45.1",
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/adapter-vercel": "^5.4.0",
@@ -71,6 +70,7 @@
     "stream-chat": "^8.37.0",
     "svelte-french-toast": "^1.2.0",
     "svelte-icons": "^2.1.0",
+    "svelte-legos": "^0.2.3",
     "svelte-sonner": "^0.3.24",
     "svelte-tel-input": "^3.4.1",
     "sveltekit-superforms": "^2.15.2",

src/routes/profile/ProfileForm.svelte

@@ -10,21 +10,17 @@
 	import toast from 'svelte-french-toast';
 	import success from '$lib/audio/success.mp3';
 	import { tick } from 'svelte';
-	import { confetti } from '@neoconfetti/svelte';
+	import { confettiAction } from 'svelte-legos';
 	export let data: SuperValidated<Infer<ArtistSchema>>;
 
-	let isVisible = false;
 	const form = superForm(data, {
 		validators: zodClient(artistSchema),
 		resetForm: false,
-		async onUpdated({ form }) {
+		onUpdated({ form }) {
 			if (form.message == 'success') {
 				const audio = new Audio();
 				audio.src = success;
 				audio.load();
-				isVisible = false;
-				await tick();
-				isVisible = true;
 				audio.play();
 				toast.success('Successfully saved!');
 			}
@@ -252,13 +248,10 @@
 			</div>
 		</div>
 		<div>
-			<Form.Button>Submit</Form.Button>
+			<Form.Button use:confetti>Submit</Form.Button>
 		</div>
 		<!-- <div class="m-4">
 			<SuperDebug data={$formData} />
 		</div> -->
 	</form>
-	{#if isVisible}
-		<div use:confetti />
-	{/if}
 </SignedIn>