From 71d842421df88917708ded0291a61e63c76a2dc2 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Wed, 26 Feb 2025 11:55:52 +0000
Subject: [PATCH 1/2] debounce a bunch of `MkInput`
these are all the places I could find that (directly or indirectly)
perform API calls when the input is changed; telling the component to
"debounce" means that the API will be called at most once per second
---
packages/frontend/src/components/MkSignupDialog.form.vue | 2 +-
packages/frontend/src/components/MkUserSelectDialog.vue | 6 +++---
packages/frontend/src/pages/admin/users.vue | 4 ++--
packages/frontend/src/pages/api-console.vue | 2 +-
4 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 3560bebace..dd263ce642 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.invitationCode }}</template>
<template #prefix><i class="ti ti-key"></i></template>
</MkInput>
- <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" autocomplete="username" required data-cy-signup-username @update:modelValue="onChangeUsername">
+ <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" autocomplete="username" required data-cy-signup-username debounce @update:modelValue="onChangeUsername">
<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 63af652cbc..120f19cb7f 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -16,16 +16,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header>{{ i18n.ts.selectUser }}</template>
<div>
<div :class="$style.form">
- <MkInput v-if="computedLocalOnly" v-model="username" :autofocus="true" @update:modelValue="search">
+ <MkInput v-if="computedLocalOnly" v-model="username" :autofocus="true" debounce @update:modelValue="search">
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<FormSplit v-else :minWidth="170">
- <MkInput v-model="username" :autofocus="true" @update:modelValue="search">
+ <MkInput v-model="username" :autofocus="true" debounce @update:modelValue="search">
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
- <MkInput v-model="host" :datalist="[hostname]" @update:modelValue="search">
+ <MkInput v-model="host" :datalist="[hostname]" debounce @update:modelValue="search">
<template #label>{{ i18n.ts.host }}</template>
<template #prefix>@</template>
</MkInput>
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index e26a2c827e..c693eed850 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -34,11 +34,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSelect>
</div>
<div :class="$style.inputs">
- <MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false">
+ <MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" debounce>
<template #prefix>@</template>
<template #label>{{ i18n.ts.username }}</template>
</MkInput>
- <MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'">
+ <MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" debounce>
<template #prefix>@</template>
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
diff --git a/packages/frontend/src/pages/api-console.vue b/packages/frontend/src/pages/api-console.vue
index 30f12a8fb3..1e3bb0de6b 100644
--- a/packages/frontend/src/pages/api-console.vue
+++ b/packages/frontend/src/pages/api-console.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="700">
<div class="_gaps_m">
<div class="_gaps_m">
- <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
+ <MkInput v-model="endpoint" :datalist="endpoints" debounce @update:modelValue="onEndpointChange()">
<template #label>Endpoint</template>
</MkInput>
<MkTextarea v-model="body" code>
--
GitLab
From c33ce30d3202e2acdfc4bd212227a4053ab95846 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Wed, 26 Feb 2025 13:08:46 +0000
Subject: [PATCH 2/2] debounce the scratchpad
---
packages/frontend/src/pages/scratchpad.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index 88171f7d70..983cba1746 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<div class="_gaps_s">
<div :class="$style.editor" class="_panel">
- <MkCodeEditor v-model="code" lang="aiscript"/>
+ <MkCodeEditor v-model="code" lang="aiscript" debounce/>
</div>
<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
</div>
--
GitLab