Skip to content

feat(website): Add real-time URL parameter updates for better UX #782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamadashy merged 2 commits into from
Aug 17, 2025
Merged

feat(website): Add real-time URL parameter updates for better UX #782

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac43c55
feat(website): Add real-time URL parameter updates on input changes
yamadashy Aug 17, 2025
e8f4a58
style(website): Apply linter formatting fixes
yamadashy Aug 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions website/client/components/Home/TryIt.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@

<script setup lang="ts">
import { FolderArchive, FolderOpen, Link2, RotateCcw } from 'lucide-vue-next';
import { computed, nextTick, onMounted, ref } from 'vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { usePackRequest } from '../../composables/usePackRequest';
import { hasNonDefaultValues, parseUrlParameters, updateUrlParameters } from '../../utils/urlParams';
import { isValidRemoteValue } from '../utils/validation';
Expand Down Expand Up @@ -142,11 +142,6 @@ const {

// Check if reset button should be shown
const shouldShowReset = computed(() => {
// Don't show if pack hasn't been executed yet
if (!hasExecuted.value) {
return false;
}

// Use utility function to check for non-default values
return hasNonDefaultValues(
inputUrl.value,
Expand All @@ -155,8 +150,8 @@ const shouldShowReset = computed(() => {
);
});

async function handleSubmit() {
// Update URL parameters before submitting
// Function to update URL parameters based on current state
function updateUrlFromCurrentState() {
const urlParamsToUpdate: Record<string, unknown> = {};

// Add repository URL if it exists and is valid
Expand All @@ -178,7 +173,9 @@ async function handleSubmit() {
}

updateUrlParameters(urlParamsToUpdate);
}

async function handleSubmit() {
await submitRequest();
}

Expand All @@ -196,6 +193,15 @@ function handleReset() {
updateUrlParameters({});
}

// Watch for changes in packOptions and inputUrl to update URL in real-time
watch(
[packOptions, inputUrl],
() => {
updateUrlFromCurrentState();
},
{ deep: true },
);
Comment on lines +197 to +203
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Aug 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The real-time URL update is a great UX improvement. However, the current implementation of watch with { deep: true } will trigger on every keystroke for the text input fields (inputUrl, includePatterns, ignorePatterns). This can lead to excessive calls to updateUrlFromCurrentState and history.replaceState, potentially causing performance issues or a sluggish feel.

To optimize this, I recommend debouncing the watcher's callback. This will ensure the URL is updated only after the user has stopped typing for a brief period.

You can achieve this by introducing a timer variable at the top of your <script setup> block (e.g., let debounceTimer: number;) and then modifying the watch handler as suggested.

watch(
  [packOptions, inputUrl],
  () => {
    clearTimeout(debounceTimer);
    debounceTimer = window.setTimeout(() => {
      updateUrlFromCurrentState();
    }, 300); // Debounce updates to avoid excessive calls on every keystroke
  },
  { deep: true },
);


// Handle URL parameters when component mounts
onMounted(() => {
const urlParams = parseUrlParameters();
Expand Down
Loading