From Prompt to UI: Building Your First Component with Agentforce Vibes

From Prompt to UI: Building Your First Component with Agentforce Vibes ## The Component We're Building ## Crafting the Initial Prompt ## What Agentforce Vibes Generated ## The JavaScript Controller ## The HTML Template ## The Apex Controller ## The Refinement Process ## Adding Debounce for Performance ## Improving the Template ## Fixing the Apex Controller ## What This Exercise Reveals ## The Workflow That Emerged ## The Developer's Role Hasn't Disappeared Part 2 of 4: Agentforce Vibes Series When you first open Agentforce Vibes and see that empty prompt field, the question isn't "Can I build something?" It's "What happens when I actually try?" The gap between a text description and working code has always been where developer skills mattered most. Agentforce Vibes promises to narrow that gap, but the only way to understand what that really means is to build something. This article walks through creating a real Lightning Web Component from start to finish using Agentforce Vibes. Not a trivial "Hello World" example, but something you might actually use: a contact search component with real-time filtering, error handling, and Salesforce design system styling. Along the way, we'll see where the AI shines, where it stumbles, and what you still need to know to ship production code. Before we write a single prompt, let's be clear about what we want: a component that displays a searchable list of contacts. Users should be able to filter by name in real-time, see results in a clean card layout, and handle the inevitable "no results found" state gracefully. It needs to follow Salesforce's Lightning Design System conventions and handle errors without breaking. This is practical work that Salesforce developers do constantly—not cutting-edge, but not trivial either. It requires understanding Apex for the backend query, LWC for the frontend, proper data binding, event handling, and SLDS styling. Perfect for testing what Agentforce Vibes can actually deliver. Here's the prompt I used to start: "Create a Lightning Web Component called contactSearch that displays a searchable list of contacts. Include a search input that filters contacts by name in real-time. Use an Apex controller to query contacts. Display results in cards showing name, email, and phone. Handle the no results case and any errors. Follow Lightning Design System patterns." This prompt is specific but not overly prescriptive. It describes what the component should do and what data to show, but doesn't dictate implementation details. I've found this balance works best with Agentforce Vibes—specific enough to guide direction, flexible enough to let the AI make reasonable technical choices. What I deliberately included: This isn't by accident. The more you micromanage the prompt, the more you're just writing code with extra words. The goal is to describe intent and let the AI handle technical implementation—but verify it does so correctly. Within seconds, Vibes returned three files: the component's JavaScript, HTML template, and an Apex controller. Let's walk through what it created and what caught my attention immediately. What's right here: The structure is clean and follows LWC conventions. The imperative Apex call pattern is correct. The error handling structure exists. The computed property for checking if contacts exist is a nice touch. What needs attention: The use of @track is outdated—LWC's reactivity system auto-tracks arrays and objects now. This works, but it's using the old pattern. More importantly, calling fetchContacts() on every keystroke means a new Apex call for every character typed. For a production component, you'd want debouncing to prevent excessive server calls. This is typical of what I've seen with Agentforce Vibes. The code works and demonstrates understanding of the framework, but it doesn't always reflect current best practices or performance considerations. It's functional, not optimal. What's impressive: The template properly uses Lightning base components. The conditional rendering is correct. The responsive grid layout with slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3 shows understanding of SLDS responsive design. The icons next to email and phone add nice visual polish. What's questionable: The error handling displays <lightning-messages> but doesn't actually populate it with the error. That component needs error data passed to it, which isn't happening. Also, there's no loading state—when the user types and waits for results, there's no spinner or indication that something is happening. Again, this is functional but incomplete. The AI understood the requirement to "handle errors" and put error-handling UI in place, but didn't fully implement it. A developer who just copies this code would ship a component with a half-working error state. What's solid: The method is properly annotated with @AuraEnabled. The with sharing enforces security. The LIMIT clause prevents returning massive result sets. The SOQL injection is properly parameterized with :searchKey. What could be better: The cacheable=true parameter is wrong for this use case. Cacheable Apex is for data that doesn't change frequently, but search results absolutely can change. If a contact's name updates, the cached result won't reflect it until the cache expires. This should be a standard @AuraEnabled method without caching. Also, searching only the Name field is limiting. A better implementation might use SOSL to search across Name, Email, and Phone, or use getSearchTerm() with a FIND clause. But for a first pass based on my prompt, this works. This is where the real work begins. The generated code is a starting point, not a finish line. Let's walk through the improvements I made and why they matter. The biggest issue with the original code was calling the server on every keystroke. I added a debounce mechanism: Now the component waits 300ms after the user stops typing before making the server call. I also removed @track decorators (not needed in modern LWC), added an isLoading state, and improved error handling to extract the actual error message. The template needed loading and error states: I removed the problematic caching: Building this component taught me more about Agentforce Vibes than any feature list could. The AI understood my intent and translated it into working code remarkably well. The structure was sound, the framework usage was correct, and the basic functionality worked on the first try. That's genuinely impressive. But "working" and "production-ready" are different standards. The generated code had performance issues (no debouncing), incomplete features (broken error handling), outdated patterns (@track), and wrong configuration (cacheable=true). None of these are catastrophic failures, but each one would cause problems in a real org. This is the pattern I've seen consistently with Agentforce Vibes: it gives you a strong foundation but not a finished product. It handles the "what" remarkably well but sometimes misses the "how" in terms of best practices, edge cases, and production considerations. The critical skill isn't writing the initial prompt—it's knowing what to look for when reviewing the generated code. You need to understand debouncing, LWC reactivity, Apex caching, and SLDS patterns to spot the issues. If you don't have that knowledge, you'll ship code that works in testing but causes problems in production. After building several components this way, I've settled into a rhythm: Start with a clear prompt. Be specific about what the component does and what data it shows, but don't micromanage implementation. Review the structure first. Check if the AI chose the right framework patterns, component types, and architectural approach. This catches major issues before diving into details. Test the happy path. Deploy the component and verify the basic functionality works as intended. Stress test the edge cases. Try empty searches, special characters, missing data, and network errors. This is where the gaps usually appear. Refine based on findings. Fix performance issues, handle edge cases, update outdated patterns, and add polish. Write tests. Yes, Agentforce Vibes can generate test classes, but reviewing and refining them is just as important as the component itself. This isn't traditional development where you write code from scratch. It's not no-code where you click through builders. It's something in between—prompt-driven development that still requires engineering judgment. If anything, this experience reinforced how much expertise still matters. The initial component worked, but making it production-ready required: Agentforce Vibes didn't eliminate the need for this knowledge—it changed when in the process it gets applied. Instead of writing boilerplate and then adding business logic, you're now reviewing generated code and applying expertise to refine it. The question isn't whether you need to understand what the code does. You absolutely do. The question is whether this is a more efficient way to build components than starting from scratch. For this type of component, I'd say yes—but only if you know what to look for in the review. Discussion Question: What type of component would you build first with Agentforce Vibes? What concerns would you have about using AI-generated code in your production org? Tags: #salesforce #agentforce #ai #vibecoding #salesforcedevelopment #lwc #lightningwebcomponents Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: import { LightningElement, track, wire } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { @track searchKey = ''; @track contacts = []; @track error; handleSearchKeyChange(event) { this.searchKey = event.target.value; this.fetchContacts(); } fetchContacts() { if (this.searchKey.length > 0) { searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error; this.contacts = []; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { LightningElement, track, wire } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { @track searchKey = ''; @track contacts = []; @track error; handleSearchKeyChange(event) { this.searchKey = event.target.value; this.fetchContacts(); } fetchContacts() { if (this.searchKey.length > 0) { searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error; this.contacts = []; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } } COMMAND_BLOCK: import { LightningElement, track, wire } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { @track searchKey = ''; @track contacts = []; @track error; handleSearchKeyChange(event) { this.searchKey = event.target.value; this.fetchContacts(); } fetchContacts() { if (this.searchKey.length > 0) { searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error; this.contacts = []; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } } CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange}> </lightning-input> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> {contact.Email} </p> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> {contact.Phone} </p> </div> </lightning-card> </div> </template> </div> </template> <template if:false={hasContacts}> <div class="slds-text-align_center slds-m-top_medium"> <p class="slds-text-color_weak">No contacts found.</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <lightning-messages></lightning-messages> </div> </template> </div> </lightning-card> </template> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange}> </lightning-input> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> {contact.Email} </p> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> {contact.Phone} </p> </div> </lightning-card> </div> </template> </div> </template> <template if:false={hasContacts}> <div class="slds-text-align_center slds-m-top_medium"> <p class="slds-text-color_weak">No contacts found.</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <lightning-messages></lightning-messages> </div> </template> </div> </lightning-card> </template> CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange}> </lightning-input> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> {contact.Email} </p> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> {contact.Phone} </p> </div> </lightning-card> </div> </template> </div> </template> <template if:false={hasContacts}> <div class="slds-text-align_center slds-m-top_medium"> <p class="slds-text-color_weak">No contacts found.</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <lightning-messages></lightning-messages> </div> </template> </div> </lightning-card> </template> COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled(cacheable=true) public static List<Contact> searchContacts(String searchTerm) { String searchKey = '%' + searchTerm + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled(cacheable=true) public static List<Contact> searchContacts(String searchTerm) { String searchKey = '%' + searchTerm + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled(cacheable=true) public static List<Contact> searchContacts(String searchTerm) { String searchKey = '%' + searchTerm + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } COMMAND_BLOCK: import { LightningElement, track } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { searchKey = ''; contacts = []; error; isLoading = false; debounceTimer; handleSearchKeyChange(event) { this.searchKey = event.target.value; clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { this.fetchContacts(); }, 300); } fetchContacts() { if (this.searchKey.length > 1) { this.isLoading = true; searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error.body.message; this.contacts = []; }) .finally(() => { this.isLoading = false; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } get showNoResults() { return !this.isLoading && !this.hasContacts && this.searchKey.length > 1; } } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { LightningElement, track } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { searchKey = ''; contacts = []; error; isLoading = false; debounceTimer; handleSearchKeyChange(event) { this.searchKey = event.target.value; clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { this.fetchContacts(); }, 300); } fetchContacts() { if (this.searchKey.length > 1) { this.isLoading = true; searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error.body.message; this.contacts = []; }) .finally(() => { this.isLoading = false; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } get showNoResults() { return !this.isLoading && !this.hasContacts && this.searchKey.length > 1; } } COMMAND_BLOCK: import { LightningElement, track } from 'lwc'; import searchContacts from '@salesforce/apex/ContactSearchController.searchContacts'; export default class ContactSearch extends LightningElement { searchKey = ''; contacts = []; error; isLoading = false; debounceTimer; handleSearchKeyChange(event) { this.searchKey = event.target.value; clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { this.fetchContacts(); }, 300); } fetchContacts() { if (this.searchKey.length > 1) { this.isLoading = true; searchContacts({ searchTerm: this.searchKey }) .then(result => { this.contacts = result; this.error = undefined; }) .catch(error => { this.error = error.body.message; this.contacts = []; }) .finally(() => { this.isLoading = false; }); } else { this.contacts = []; } } get hasContacts() { return this.contacts.length > 0; } get showNoResults() { return !this.isLoading && !this.hasContacts && this.searchKey.length > 1; } } CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange} placeholder="Type to search contacts..."> </lightning-input> <template if:true={isLoading}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner> </div> </template> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <template if:true={contact.Email}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Email}</span> </p> </template> <template if:true={contact.Phone}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Phone}</span> </p> </template> </div> </lightning-card> </div> </template> </div> </template> <template if:true={showNoResults}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-icon icon-name="utility:search" size="small"></lightning-icon> <p class="slds-text-color_weak slds-m-top_small">No contacts found for "{searchKey}"</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <div class="slds-notify slds-notify_alert slds-alert_error" role="alert"> <span class="slds-assistive-text">error</span> <h2>{error}</h2> </div> </div> </template> </div> </lightning-card> </template> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange} placeholder="Type to search contacts..."> </lightning-input> <template if:true={isLoading}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner> </div> </template> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <template if:true={contact.Email}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Email}</span> </p> </template> <template if:true={contact.Phone}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Phone}</span> </p> </template> </div> </lightning-card> </div> </template> </div> </template> <template if:true={showNoResults}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-icon icon-name="utility:search" size="small"></lightning-icon> <p class="slds-text-color_weak slds-m-top_small">No contacts found for "{searchKey}"</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <div class="slds-notify slds-notify_alert slds-alert_error" role="alert"> <span class="slds-assistive-text">error</span> <h2>{error}</h2> </div> </div> </template> </div> </lightning-card> </template> CODE_BLOCK: <template> <lightning-card title="Contact Search" icon-name="standard:contact"> <div class="slds-p-around_medium"> <lightning-input type="search" label="Search Contacts" value={searchKey} onchange={handleSearchKeyChange} placeholder="Type to search contacts..."> </lightning-input> <template if:true={isLoading}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner> </div> </template> <template if:true={hasContacts}> <div class="slds-grid slds-wrap slds-gutters slds-m-top_medium"> <template for:each={contacts} for:item="contact"> <div key={contact.Id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"> <lightning-card> <div class="slds-p-around_small"> <h3 class="slds-text-heading_small">{contact.Name}</h3> <template if:true={contact.Email}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Email}</span> </p> </template> <template if:true={contact.Phone}> <p class="slds-m-top_x-small"> <lightning-icon icon-name="utility:phone" size="x-small"></lightning-icon> <span class="slds-m-left_x-small">{contact.Phone}</span> </p> </template> </div> </lightning-card> </div> </template> </div> </template> <template if:true={showNoResults}> <div class="slds-text-align_center slds-m-top_medium"> <lightning-icon icon-name="utility:search" size="small"></lightning-icon> <p class="slds-text-color_weak slds-m-top_small">No contacts found for "{searchKey}"</p> </div> </template> <template if:true={error}> <div class="slds-m-top_medium"> <div class="slds-notify slds-notify_alert slds-alert_error" role="alert"> <span class="slds-assistive-text">error</span> <h2>{error}</h2> </div> </div> </template> </div> </lightning-card> </template> COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled public static List<Contact> searchContacts(String searchTerm) { if (String.isBlank(searchTerm)) { return new List<Contact>(); } String searchKey = '%' + String.escapeSingleQuotes(searchTerm) + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled public static List<Contact> searchContacts(String searchTerm) { if (String.isBlank(searchTerm)) { return new List<Contact>(); } String searchKey = '%' + String.escapeSingleQuotes(searchTerm) + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } COMMAND_BLOCK: public with sharing class ContactSearchController { @AuraEnabled public static List<Contact> searchContacts(String searchTerm) { if (String.isBlank(searchTerm)) { return new List<Contact>(); } String searchKey = '%' + String.escapeSingleQuotes(searchTerm) + '%'; return [ SELECT Id, Name, Email, Phone FROM Contact WHERE Name LIKE :searchKey ORDER BY Name LIMIT 50 ]; } } - The component name (important for consistency in your org) - The data source (Apex controller, not static data) - The user interaction pattern (real-time filtering) - The UI elements (search input, cards) - The edge cases (no results, errors) - The design system (SLDS) - Specific SLDS component names - Query implementation details - Event handler names - Exact styling specifications - Added a loading spinner during searches - Made email and phone conditional (some contacts might not have them) - Improved the "no results" message to show what was searched - Properly implemented error display with an SLDS alert instead of an empty component - Removed cacheable=true - Added null/blank check for the search term - Added String.escapeSingleQuotes() for extra security - Added early return for empty searches - Understanding LWC reactivity to remove unnecessary decorators - Recognizing performance anti-patterns and implementing debouncing - Knowing Apex caching implications and when to use it - Implementing proper error handling beyond structural placeholders - Adding loading states for better user experience - Securing inputs against edge cases