TTC
Theo's Typesafe CultHoly Spirit Activist | John ☦

Handling loading and error states in T3

Hi I have just started using the T3 stack and was wondering what's the best practice for handling error loading states on the client, because I try in my frontend to do something like this.
const { data: jobs, isLoading } = api.job.getJobs.useQuery({
searchQuery,
take,
skip,
});

if (isLoading) return <Spinner size="lg" />;
const { data: jobs, isLoading } = api.job.getJobs.useQuery({
searchQuery,
take,
skip,
});

if (isLoading) return <Spinner size="lg" />;
When I do this it seems like my search input keeps re-rendering and losing focus after each keystroke. Is there something I'm missing and is this how I should be handling the state?
HSA
Holy Spirit Activist | John ☦14d ago
When I get rid off the spinner, it works fine without re-rendering after each stroke
S
stoyko14d ago
It does rerender, you just don't see it. What you might want to do is setup a debounce which will help you not send a request on each keystroke, but after a specific delay. https://www.developerway.com/posts/debouncing-in-react This is the first article I found in google about it, but I am sure you can find more information to help you
How to debounce and throttle in React without losing your mind
Deep dive into debounce and throttle in React. What is debounce and throttle, how to use them in React properly, how to avoid breaking them when state and re-renders are involved.
HSA
Holy Spirit Activist | John ☦14d ago
But the thing is that I'm sending requests on each keystroke anyway, so why does the text input lose focus when I have that fi statement in my Home page, but without it, the text retains its focus.
S
stoyko14d ago
because you have an early return. You can try it without the spinner as well. Just setup a console.log('rerender'); and see how it updates on each keystroke
HSA
Holy Spirit Activist | John ☦14d ago
But I don't understand why does it lose focus when I have the spinner? How would you handle the loading state in this case then?
S
stoyko14d ago
Because you render a different component whenever you have isLoading set to true, which in your case, is in every single key stroke press. I would handle it by adding a debounce. This will allow you to type a much longer input before your spinner shows. Or change it so that the spinner is shown only in the content that sits wherever your data is shown. This way, you won't lose focus in your input field, while also showing a spinner on the page while searching
HSA
Holy Spirit Activist | John ☦14d ago
Okay thanks a lot for the help I appreciate it.
S
stoyko14d ago
No problem. If you think your question is answered, mark it as solved.
Want results from more Discord servers?
Add your server
More Posts
Query Invalidation with trpc not working with React Server Components and App RouterHi guys, I am trying to do Optimistic updates with trpc but the problem is I am fetching data on theTanstack Virtual or Other optionsHey everyone, quick question for you all. I've been tasked with building a complex grid with horizoRevalidatepath type undefined vs pageHello! Does anyone know if there's supposed to be a difference between calling revalidatePath with Turborepo without Expo?Is there a way to get things working in a Turborepo without the expo app? I'm assuming the Expo appExtending next-auth userI'm trying to extend the next-auth user but somehow It's not returning new fields, and I only have tAre cold starts an issue?I haven't used Next API routes as a primary API before, and from what I understand they are mostly sI have a doubt .I have a doubt . suppose i am using a hosting platform which offers some free but limited resources Expo Router headerSearchBarOptionsHi folks, struggling quite a bit to try and implement the native iOS search bar in the header of a tIm a newbie creating a document editor and idk how to setup an architecture to save the dataI'm using tip tap for the editor on the front end while using Postgresql with bun on the back end. IDifferences Between ProvidersI'm in a small team and we are looking for some cloud providers to have the following things: - Servhow to use yarnrc.ymlI found this ``` nodeLinker: node-modules plugins: - path: .yarn/plugins/@yarnpkg/plugin-workspacA guide for tRPC MySQL drizzle testing setupHey folks I have built a product using t3 stack with MySQL db and drizzle as the ORM. I would like tshadcn/ui: Why do I get the incorrect error message?If I don't type anything in I only get the "required" message despite defining a message in the zod TRPCClientError: Unable to transform response from serverI just migrated from Next Auth to Clerk. Clerk is working fine. tRPC works fine too, but I keep gettBasic system design questions for a big projectHey, I am making a fairly ambitious app and wanted some advice on how to proceed with my system desiValidation error in JSON schema provided by user against the JSON Schema draft 2020-12?I have integrated monaco editor on my website and I want users to input JSON data and validate it agHow to change refType in forwardRef based on prop?imagine you want a React component to have a certain ref type if some prop is present, and another rHow do I migrate from Next-Auth to Clerk Auth?I recently started a project with with all options enabled with create T3 stack command, how do I miState ManagementI need help in managing state in nextjs, can someone help metable schema admins tableIs it better to have a table for admins a table for moderators and a tabble for users, or have just