Delay IsLoading....

i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the data. I've tried a number of implementations and failed, can anyone help?
const { isLoading, isError, data } = trpc.ticketDomain.getByTicketId.useQuery(
{
ticketId: selectedTicket!.id,
}
);

if (isLoading) {
// details section should not render if isloading has been true for 200ms or less and if 'data' is not available

// load data as soon as its available and render the details section

// if fetching takes longer than 200ms, show loading spinner
return (

<LoadingSpinner />;

);
}
const { isLoading, isError, data } = trpc.ticketDomain.getByTicketId.useQuery(
{
ticketId: selectedTicket!.id,
}
);

if (isLoading) {
// details section should not render if isloading has been true for 200ms or less and if 'data' is not available

// load data as soon as its available and render the details section

// if fetching takes longer than 200ms, show loading spinner
return (

<LoadingSpinner />;

);
}
UU
Unknown User514d ago
AD
A Dan513d ago
Thank you for getting back to me with these solutions. I'm ganna read over them and implement. 🙏🏾
T
trash513d ago
You’re still gonna have issues with it flashing a spinner not sure if you want to artificially show the spinner for x time if it resolves immediately after 200ms I use promise.race for these
More Posts
Clearing CacheHow do I clear the queryCache for a particular query using the trpc context? If that's not possible,context at times emptyam new to trpc. i am usin iron-session with nextjs and its awesome. am forwarding the context. but sTRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)This is my wrapper reference from trpc: https://github.com/WeirdoGit/NewGitRepo/blob/162cd9317c0e978query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutationtesting a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an objeCAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I coDifference in type inference for vanilla client?Hello, querying an endpoint with the vanilla tRPC client but at runtime the actual result isn't the Zod Error MiddlewareHey lovely people. At Cal.com we make heavy use of `zod` for data validation. I was wondering if theclear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global errRequest context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(oAuth with passport.jsEvening all, Has anyone successfully setup trpc with passport.js for auth?Object keeps getting overwrittenI feel like i'm missing something fundamental here. when I add a new entry into object ``b`` it res