From ea6ae3d7e26e63ab6b2aa98a770cffd735255692 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 8 Oct 2025 19:57:20 +0530
Subject: [PATCH] feat: debounce error section

---
 .vscode/mcp.json                 | 10 ++++++++++
 src/lib/components/Editor.svelte | 24 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 .vscode/mcp.json

diff --git a/.vscode/mcp.json b/.vscode/mcp.json
new file mode 100644
index 00000000..37ff43f2
--- /dev/null
+++ b/.vscode/mcp.json
@@ -0,0 +1,10 @@
+{
+  "servers": {
+    "svelte": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@sveltejs/mcp"]
+    }
+  },
+  "inputs": []
+}
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index c03d15cd..cf5e1945 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -7,9 +7,10 @@
   import { TID } from '$/constants';
   import { env } from '$/util/env';
   import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state';
+  import { debounce } from 'lodash-es';
   import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';
 
-  let { isMobile }: { isMobile: boolean } = $props();
+  const { isMobile } = $props<{ isMobile: boolean }>();
   const onUpdate = (text: string) => {
     if ($stateStore.editorMode === 'code') {
       updateCode(text);
@@ -17,6 +18,25 @@
       updateConfig(text);
     }
   };
+
+  let showError = $state(false);
+
+  const showErrorDebounced = debounce(() => {
+    showError = true;
+  }, 5000);
+
+  $effect(() => {
+    if ($stateStore.error) {
+      showErrorDebounced();
+    } else {
+      showErrorDebounced.cancel();
+      showError = false;
+    }
+
+    return () => {
+      showErrorDebounced.cancel();
+    };
+  });
 </script>
 
 <div class="flex h-full flex-col">
@@ -25,7 +45,7 @@
   {:else}
     <DesktopEditor {onUpdate} />
   {/if}
-  {#if $stateStore.error instanceof Error}
+  {#if showError && $stateStore.error instanceof Error}
     <div class="flex flex-col text-sm" data-testid={TID.errorContainer}>
       <div class="flex items-center justify-between gap-2 bg-slate-900 p-2 text-white">
         <div class="flex w-fit items-center gap-2">