fix: realtime connect/disconnect issue (#2768)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/locales/af.json

@@ -7,6 +7,7 @@
     "clear_all": "Maak alles skoon",
     "close": "Close",
     "connect": "Koppel",
+    "connecting": "Connecting",
     "copy": "Kopieer",
     "delete": "Vee uit",
     "disconnect": "Ontkoppel",
@@ -35,6 +36,7 @@
     "search": "Soek",
     "send": "Stuur",
     "start": "Begin",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/ar.json

@@ -7,6 +7,7 @@
     "clear_all": "امسح الكل",
     "close": "Close",
     "connect": "الاتصال",
+    "connecting": "Connecting",
     "copy": "نسخ",
     "delete": "حذف",
     "disconnect": "قطع الاتصال",
@@ -35,6 +36,7 @@
     "search": "بحث",
     "send": "ارسل",
     "start": "ابدأ",
+    "starting": "Starting",
     "stop": "قف",
     "to_close": "لإغلاء",
     "to_navigate": "للإنتقال",

packages/hoppscotch-app/locales/ca.json

@@ -7,6 +7,7 @@
     "clear_all": "Neteja-ho tot",
     "close": "Close",
     "connect": "Connectar",
+    "connecting": "Connecting",
     "copy": "Copiar",
     "delete": "Eliminar",
     "disconnect": "Desconnectar",
@@ -35,6 +36,7 @@
     "search": "Cercar",
     "send": "Enviar",
     "start": "Començar",
+    "starting": "Starting",
     "stop": "Aturar",
     "to_close": "Tancar",
     "to_navigate": "Navegar",

packages/hoppscotch-app/locales/cn.json

@@ -7,6 +7,7 @@
     "clear_all": "全部清除",
     "close": "Close",
     "connect": "连接",
+    "connecting": "Connecting",
     "copy": "复制",
     "delete": "删除",
     "disconnect": "断开连接",
@@ -35,6 +36,7 @@
     "search": "搜索",
     "send": "发送",
     "start": "开始",
+    "starting": "Starting",
     "stop": "停止",
     "to_close": "以关闭",
     "to_navigate": "以定位",

packages/hoppscotch-app/locales/cs.json

@@ -7,6 +7,7 @@
     "clear_all": "Vymazat vše",
     "close": "Close",
     "connect": "Připojit",
+    "connecting": "Connecting",
     "copy": "kopírovat",
     "delete": "Vymazat",
     "disconnect": "Odpojit",
@@ -35,6 +36,7 @@
     "search": "Vyhledávání",
     "send": "Poslat",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/da.json

@@ -7,6 +7,7 @@
     "clear_all": "Slet alt",
     "close": "Close",
     "connect": "Opret forbindelse",
+    "connecting": "Connecting",
     "copy": "Kopi",
     "delete": "Slet",
     "disconnect": "Koble fra",
@@ -35,6 +36,7 @@
     "search": "Søg",
     "send": "Sende",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Hold op",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/de.json

@@ -7,6 +7,7 @@
     "clear_all": "Alles zurücksetzen",
     "close": "Close",
     "connect": "Verbinden",
+    "connecting": "Connecting",
     "copy": "Kopieren",
     "delete": "Löschen",
     "disconnect": "Trennen",
@@ -35,6 +36,7 @@
     "search": "Suchen",
     "send": "Senden",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stopp",
     "to_close": "zum Schließen",
     "to_navigate": "zum Navigieren",

packages/hoppscotch-app/locales/el.json

@@ -7,6 +7,7 @@
     "clear_all": "Τα καθαρίζω όλα",
     "close": "Close",
     "connect": "Συνδέω-συωδεομαι",
+    "connecting": "Connecting",
     "copy": "αντίγραφο",
     "delete": "Διαγράφω",
     "disconnect": "Αποσυνδέω",
@@ -35,6 +36,7 @@
     "search": "Αναζήτηση",
     "send": "Στείλετε",
     "start": "Αρχή",
+    "starting": "Starting",
     "stop": "Να σταματήσει",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/en.json

@@ -7,6 +7,7 @@
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
+    "connecting": "Connecting",
     "copy": "Copy",
     "delete": "Delete",
     "disconnect": "Disconnect",
@@ -35,6 +36,7 @@
     "search": "Search",
     "send": "Send",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/es.json

@@ -7,6 +7,7 @@
     "clear_all": "Limpiar todo",
     "close": "Close",
     "connect": "Conectar",
+    "connecting": "Connecting",
     "copy": "Copiar",
     "delete": "Borrar",
     "disconnect": "Desconectar",
@@ -35,6 +36,7 @@
     "search": "Buscar",
     "send": "Enviar",
     "start": "Comenzar",
+    "starting": "Starting",
     "stop": "Detener",
     "to_close": "para cerrar",
     "to_navigate": "para navegar",

packages/hoppscotch-app/locales/fi.json

@@ -7,6 +7,7 @@
     "clear_all": "Tyhjennä",
     "close": "Close",
     "connect": "Kytkeä",
+    "connecting": "Connecting",
     "copy": "Kopio",
     "delete": "Poistaa",
     "disconnect": "Katkaista",
@@ -35,6 +36,7 @@
     "search": "Hae",
     "send": "Lähettää",
     "start": "alkaa",
+    "starting": "Starting",
     "stop": "Lopettaa",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/fr.json

@@ -7,6 +7,7 @@
     "clear_all": "Tout effacer",
     "close": "Close",
     "connect": "Connecter",
+    "connecting": "Connecting",
     "copy": "Copier",
     "delete": "Supprimer",
     "disconnect": "Déconnecter",
@@ -35,6 +36,7 @@
     "search": "Chercher",
     "send": "Envoyer",
     "start": "Démarrer",
+    "starting": "Starting",
     "stop": "Arrêter",
     "to_close": "pour fermer",
     "to_navigate": "pour naviguer",

packages/hoppscotch-app/locales/he.json

@@ -7,6 +7,7 @@
     "clear_all": "נקה הכל",
     "close": "Close",
     "connect": "לְחַבֵּר",
+    "connecting": "Connecting",
     "copy": "עותק",
     "delete": "לִמְחוֹק",
     "disconnect": "לְנַתֵק",
@@ -35,6 +36,7 @@
     "search": "לחפש",
     "send": "לִשְׁלוֹחַ",
     "start": "הַתחָלָה",
+    "starting": "Starting",
     "stop": "תפסיק",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/hi.json

@@ -7,6 +7,7 @@
     "clear_all": "सभी साफ करें",
     "close": "बंद करे",
     "connect": "कनेक्ट करें",
+    "connecting": "Connecting",
     "copy": "कॉपी",
     "delete": "हटाएं",
     "disconnect": "डिस्कनेक्ट",
@@ -35,6 +36,7 @@
     "search": "खोज",
     "send": "भेजें ",
     "start": "प्रारंभ",
+    "starting": "Starting",
     "stop": "रोकें",
     "to_close": "बंद करने के लिए",
     "to_navigate": "नेविगेट करने के लिए",

packages/hoppscotch-app/locales/hu.json

@@ -7,6 +7,7 @@
     "clear_all": "Összes törlése",
     "close": "Close",
     "connect": "Kapcsolódás",
+    "connecting": "Connecting",
     "copy": "Másolás",
     "delete": "Törlés",
     "disconnect": "Leválasztás",
@@ -35,6 +36,7 @@
     "search": "Keresés",
     "send": "Küldés",
     "start": "Indítás",
+    "starting": "Starting",
     "stop": "Leállítás",
     "to_close": "a bezáráshoz",
     "to_navigate": "a navigáláshoz",

packages/hoppscotch-app/locales/id.json

@@ -7,6 +7,7 @@
     "clear_all": "Bersihkan semua",
     "close": "Menutup",
     "connect": "Menyambung",
+    "connecting": "Connecting",
     "copy": "Salin",
     "delete": "Menghapus",
     "disconnect": "Memutuskan",
@@ -35,6 +36,7 @@
     "search": "Cari",
     "send": "Kirim",
     "start": "Mulailah",
+    "starting": "Starting",
     "stop": "Berhenti",
     "to_close": "Untuk menutup",
     "to_navigate": "Untuk menavigasi",

packages/hoppscotch-app/locales/it.json

@@ -7,6 +7,7 @@
     "clear_all": "Cancella tutto",
     "close": "Close",
     "connect": "Connetti",
+    "connecting": "Connecting",
     "copy": "Copia",
     "delete": "Elimina",
     "disconnect": "Disconnetti",
@@ -35,6 +36,7 @@
     "search": "Cerca",
     "send": "Invia",
     "start": "Avvia",
+    "starting": "Starting",
     "stop": "Interrompi",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/ja.json

@@ -7,6 +7,7 @@
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
+    "connecting": "Connecting",
     "copy": "Copy",
     "delete": "Delete",
     "disconnect": "Disconnect",
@@ -35,6 +36,7 @@
     "search": "Search",
     "send": "Send",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/ko.json

@@ -7,6 +7,7 @@
     "clear_all": "모두 지우기",
     "close": "닫기",
     "connect": "연결",
+    "connecting": "Connecting",
     "copy": "복사",
     "delete": "삭제",
     "disconnect": "연결 해제",
@@ -35,6 +36,7 @@
     "search": "검색",
     "send": "보내기",
     "start": "시작",
+    "starting": "Starting",
     "stop": "정지",
     "to_close": "로 닫기",
     "to_navigate": "로 이동",

packages/hoppscotch-app/locales/nl.json

@@ -7,6 +7,7 @@
     "clear_all": "Wis alles",
     "close": "Close",
     "connect": "Verbinden",
+    "connecting": "Connecting",
     "copy": "Kopiëren",
     "delete": "Verwijderen",
     "disconnect": "Verbinding verbreken",
@@ -35,6 +36,7 @@
     "search": "Zoeken",
     "send": "Versturen",
     "start": "Begin",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/no.json

@@ -7,6 +7,7 @@
     "clear_all": "Tøm alt",
     "close": "Close",
     "connect": "Koble",
+    "connecting": "Connecting",
     "copy": "Kopiere",
     "delete": "Slett",
     "disconnect": "Koble fra",
@@ -35,6 +36,7 @@
     "search": "Søk",
     "send": "Sende",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stoppe",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/pl.json

@@ -7,6 +7,7 @@
     "clear_all": "Wyczyść wszystko",
     "close": "Close",
     "connect": "Połącz",
+    "connecting": "Connecting",
     "copy": "Kopiuj",
     "delete": "Usuń",
     "disconnect": "Rozłącz",
@@ -35,6 +36,7 @@
     "search": "Szukaj",
     "send": "Wyślij",
     "start": "Rozpocznij",
+    "starting": "Starting",
     "stop": "Zatrzymaj",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/pt-br.json

@@ -7,6 +7,7 @@
     "clear_all": "Limpar tudo",
     "close": "Close",
     "connect": "Conectar",
+    "connecting": "Connecting",
     "copy": "Copiar",
     "delete": "Excluir",
     "disconnect": "Desconectar",
@@ -35,6 +36,7 @@
     "search": "Procurar",
     "send": "Enviar",
     "start": "Começar",
+    "starting": "Starting",
     "stop": "Pare",
     "to_close": "Fechar",
     "to_navigate": "Navegar",

packages/hoppscotch-app/locales/pt.json

@@ -7,6 +7,7 @@
     "clear_all": "Limpar tudo",
     "close": "Close",
     "connect": "Conectar",
+    "connecting": "Connecting",
     "copy": "cópia de",
     "delete": "Excluir",
     "disconnect": "desconectar",
@@ -35,6 +36,7 @@
     "search": "Procurar",
     "send": "Mandar",
     "start": "Começar",
+    "starting": "Starting",
     "stop": "Pare",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/ro.json

@@ -7,6 +7,7 @@
     "clear_all": "Curăță tot",
     "close": "Închide",
     "connect": "Conectare",
+    "connecting": "Connecting",
     "copy": "Copiază",
     "delete": "Șterge",
     "disconnect": "Deconectare",
@@ -35,6 +36,7 @@
     "search": "Căutare",
     "send": "Trimite",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Stop",
     "to_close": "Închide",
     "to_navigate": "Navighează",

packages/hoppscotch-app/locales/ru.json

@@ -7,6 +7,7 @@
     "clear_all": "Очистить все",
     "close": "Close",
     "connect": "Подключиться",
+    "connecting": "Connecting",
     "copy": "Скопировать",
     "delete": "Удалить",
     "disconnect": "Отключиться",
@@ -35,6 +36,7 @@
     "search": "Поиск",
     "send": "Отправить",
     "start": "Начать",
+    "starting": "Starting",
     "stop": "Стоп",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/sr.json

@@ -7,6 +7,7 @@
     "clear_all": "Избриши све",
     "close": "Close",
     "connect": "Цоннецт",
+    "connecting": "Connecting",
     "copy": "Цопи",
     "delete": "Избриши",
     "disconnect": "Прекините везу",
@@ -35,6 +36,7 @@
     "search": "Претрага",
     "send": "Пошаљи",
     "start": "Почетак",
+    "starting": "Starting",
     "stop": "Зауставити",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/sv.json

@@ -7,6 +7,7 @@
     "clear_all": "Rensa alla",
     "close": "Close",
     "connect": "Ansluta",
+    "connecting": "Connecting",
     "copy": "Kopiera",
     "delete": "Radera",
     "disconnect": "Koppla ifrån",
@@ -35,6 +36,7 @@
     "search": "Sök",
     "send": "Skicka",
     "start": "Start",
+    "starting": "Starting",
     "stop": "Sluta",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/locales/tr.json

@@ -7,6 +7,7 @@
     "clear_all": "Hepsini temizle",
     "close": "Close",
     "connect": "Bağlan",
+    "connecting": "Connecting",
     "copy": "Kopyala",
     "delete": "Sil",
     "disconnect": "Bağlantıyı kes",
@@ -35,6 +36,7 @@
     "search": "Arama",
     "send": "Gönder",
     "start": "Başla",
+    "starting": "Starting",
     "stop": "Dur",
     "to_close": "kapatmak için",
     "to_navigate": "gezdirmek için",

packages/hoppscotch-app/locales/tw.json

@@ -7,6 +7,7 @@
     "clear_all": "全部清除",
     "close": "Close",
     "connect": "連線",
+    "connecting": "Connecting",
     "copy": "複製",
     "delete": "刪除",
     "disconnect": "斷開連線",
@@ -35,6 +36,7 @@
     "search": "搜尋",
     "send": "傳送",
     "start": "開始",
+    "starting": "Starting",
     "stop": "停止",
     "to_close": "以關閉",
     "to_navigate": "以瀏覽",

packages/hoppscotch-app/locales/uk.json

@@ -7,6 +7,7 @@
     "clear_all": "Очистити все",
     "close": "Закрити",
     "connect": "Підключіться",
+    "connecting": "Connecting",
     "copy": "Копіювати",
     "delete": "Видалити",
     "disconnect": "Відключити",
@@ -35,6 +36,7 @@
     "search": "Пошук",
     "send": "Надіслати",
     "start": "Почати",
+    "starting": "Starting",
     "stop": "Стій",
     "to_close": "щоб закрити",
     "to_navigate": "для навігації",

packages/hoppscotch-app/locales/vi.json

@@ -7,6 +7,7 @@
     "clear_all": "Quet sạch tât cả",
     "close": "Close",
     "connect": "Liên kết",
+    "connecting": "Connecting",
     "copy": "Sao chép",
     "delete": "Xóa bỏ",
     "disconnect": "Ngắt kết nối",
@@ -35,6 +36,7 @@
     "search": "Tìm kiếm",
     "send": "Gửi",
     "start": "Bắt đầu",
+    "starting": "Starting",
     "stop": "Ngừng lại",
     "to_close": "to close",
     "to_navigate": "to navigate",

packages/hoppscotch-app/src/components.d.ts

@@ -98,14 +98,10 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']

packages/hoppscotch-app/src/components/button/Primary.vue

@@ -2,7 +2,7 @@
   <SmartLink
     :to="to"
     :blank="blank"
-    class="inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
+    class="relative inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
@@ -27,9 +27,8 @@
     role="button"
   >
     <span
-      v-if="!loading"
       class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }"
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
     >
       <component
         :is="icon"
@@ -51,7 +50,12 @@
         </kbd>
       </div>
     </span>
-    <SmartSpinner v-else />
+    <span
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <SmartSpinner />
+    </span>
   </SmartLink>
 </template>
 

packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -62,13 +62,13 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         aggregateEnvs.find(
           (env) => env.key === text.slice(start - from, end - from)
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-        )?.sourceEnv ?? "choose an environment"
+        )?.sourceEnv ?? "Choose an Environment"
 
       const envValue =
         aggregateEnvs.find(
           (env) => env.key === text.slice(start - from, end - from)
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-        )?.value ?? "not found"
+        )?.value ?? "Not found"
 
       const result = parseTemplateStringE(envValue, aggregateEnvs)
 

packages/hoppscotch-app/src/helpers/realtime/SSEConnection.ts

@@ -39,7 +39,10 @@ export class SSEConnection {
             time: Date.now(),
           })
         }
-        this.sse.onerror = this.handleError
+        this.sse.onerror = (e) => {
+          this.handleError(e)
+          this.stop()
+        }
         this.sse.addEventListener(eventType, ({ data }) => {
           this.addEvent({
             type: "MESSAGE_RECEIVED",
@@ -66,7 +69,6 @@ export class SSEConnection {
   }
 
   private handleError(error: Event) {
-    this.stop()
     this.addEvent({
       time: Date.now(),
       type: "ERROR",

packages/hoppscotch-app/src/pages/realtime/mqtt.vue

@@ -24,7 +24,9 @@
             :disabled="!isUrlValid"
             class="w-32"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "

packages/hoppscotch-app/src/pages/realtime/socketio.vue

@@ -82,7 +82,9 @@
             name="connect"
             class="w-32"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "

packages/hoppscotch-app/src/pages/realtime/sse.vue

@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="sse">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
@@ -42,7 +42,9 @@
             name="start"
             class="w-32"
             :label="
-              connectionState === 'STOPPED'
+              connectionState === 'STARTING'
+                ? t('action.starting')
+                : connectionState === 'STOPPED'
                 ? t('action.start')
                 : t('action.stop')
             "

packages/hoppscotch-app/src/pages/realtime/websocket.vue

@@ -26,7 +26,9 @@
             class="w-32"
             name="connect"
             :label="
-              connectionState === 'DISCONNECTED'
+              connectionState === 'CONNECTING'
+                ? t('action.connecting')
+                : connectionState === 'DISCONNECTED'
                 ? t('action.connect')
                 : t('action.disconnect')
             "