Channel
Interviewed Person
Aurora Scharff
[Music] Okay, let's go. Okay, hello everyone. Uh, thanks for having me here at Frontend Nation. I'm super excited to speak here and today I'll be teaching how to build interactive async QIS with React 19 and Arkit. So, my name is Aurora. Again, I'm from Norway and I work as a consultant at Crayon Consulting uh in Oslo. And again as mentioned in the intro I use the
nextj app router every day uh at my current project and I use a lot of react 19 and the other features from there like server components. So that's where I get my inspiration from. Um and on that note I was initially thinking of telling a story of the inspiration behind this talk but you know uh let me rather show you and just jump right into the demo. So what you're looking at here is a project um dashboard demo app with an
account selector. Um so you'll see I have an account selector here and this is now based on a real feature I built for my current project uh which is the inspiration behind this talk. And let's pretend that your designer just gave you this nice custom UI with a custom account selector that didn't exist in your component library. So you just built it yourself and all is well, right? Let's try this out. So the account selector allows me to switch account, get a loading state spinner, and then eventually see a toast and the updated dashboard. There was
kind of a strange interaction there. Uh the loading state was not really in sync with the visual update, but that's fine. Let's just continue interacting with the dropdown. So I I see here that the keyboard navigation is incorrectly implemented. I'm trying to use the arrows, but it's not working. So, actually I have to use the tabs and then I tab out and the menu doesn't close and then I can't escape. I can't click outside. There's just a lot of problems with this. Um, it doesn't
have any smart positioning. So, even if the screen is like this, it doesn't know where to go. Lots of problems with this dropdown. So, my challenge here is um I'm trying to build a custom UI component yet I want it to be accessible and interactive. But unlike the previous speaker, I'm not an accessibility expert. I don't know all the area attributes either. Uh and I also want to smoothly handle the async operations with a good UX. But I don't want to write lots of code to get all of this
right. So this situation was me not long ago. Maybe some of you have been in a similar situation. And that's why the goal of this demo is to show you how to make this custom account selector interactive and accessible and improve the unstable UX using certain tools AR kit and React 19. So let's get to the code. So the setup here is the Nex.js app router um using Prisma OAM and Prisma push case database and then tel CSSV4 and I already completed all the data fetching here. Um since I'm using in uh
the app router I have server components. I'm fetching data with these data fetching functions through my data access layer. Um using Prisma I can get accounts an account and the current account and this is based on a cookie value so that I'm just simulating the whole authentication flow here. Um and when I load the page I have suspense uh suspenses with fallbacks giving me this nice loading state and everything here is dynamic and slow
down. So we can see this and this is not the focus of today and I've covered it before in previous talks uh if you're interested or you can just check out the code on GitHub later. So that's our setup. But the problems are in this account selector component, right? It's uh reading a promise from the server. Uh this accounts promise current account promise with the react 19 use. And here you might recognize this typical React code handle switch
