Bleeds: The UI State Framework Your Users Deserve (with Eddy Nguyen)

**Elliott** (0:05)
Welcome back to another episode of SEEK Bytes, a podcast by engineers for engineers, where we talk about anything and everything engineering. Today on the podcast, we're going to be talking to Eddy, one of the lead engineers here at SEEK, and the author of the pattern, The Leads, what it means for UIs and how we can make even better user experiences. Stick around to find out more.
All right, welcome back to another episode of SEEK Bytes. My name is Elliott, and today I am joined by Will.

**Will** (0:45)
Hello.

**Elliott** (0:45)
And by Eddy.

**Eddy Nguyen** (0:47)
Hello.

**Elliott** (0:48)
Eddy, welcome to the SEEK Bytes podcast. So today we're going to be chatting about Bleeds, which is a pattern that I understand that Eddy came up with.

**Will** (0:57)
Eddy, I thought it was Leona Lewis.

**Eddy Nguyen** (0:59)
Oh.

**Will** (0:59)
That's Bleeds in love, isn't it?

**Eddy Nguyen** (1:01)
Yeah.

**Will** (1:04)
Thank you.

**Elliott** (1:05)
Yeah.

**Eddy Nguyen** (1:05)
That's the theme song of Blitz now.

**Will** (1:07)
Yeah. Thank you.

**Elliott** (1:09)
Yeah. I not so shamelessly stole this when I was working on a front-end pattern MVCS. I stumbled across this randomly on Confluence and I was like, this thing is the best thing since sliced bread. So Eddy, why don't you give us a quick TLDR on what Bleeds is.

**Will** (1:27)
Maybe before that, Eddy, who are you? What do you do here at SEEK?

**Elliott** (1:30)
That's crazy talk.

**Eddy Nguyen** (1:34)
All right. I am Eddy and I'm a lead engineer in a team called Candidate Management in the selection sub-domain. So this is my main gig. I also am a open-source developer for the Guild and the maintainer of GraphQL Coaching, which we also use at SEEK.
I'm really huge in that open-source space, especially for GraphQL and I'm a GraphQL ambassador of this year, one of the big teams. So very excited to be here and talk about Bleeds mainly.

**Will** (2:09)
Did Bleeds come about from some of the GraphQL stuff or just from front-end development in general?

**Eddy Nguyen** (2:14)
Yeah, from front-end development in general, but some of the ideas kind of come from a library, like Apollo Client, which is part of the GraphQL, I guess, like ecosystem, that kind of like kickstart some of that thinking. And yeah, and when I look broader outside of that library, you know, that's the kind of principle that Bleeds has, is all the UI states that comes with it. Yeah.

**Will** (2:43)
I think, yeah, now back into what Elliott asked, what is Bleeds?

**Eddy Nguyen** (2:47)
Bleeds started as a, I guess, like guideline, not so much of a framework, right?
Like it's one way we want to communicate within our team, within like our product team, about how we want to present our application, from the application to our users, in a way that's helpful for them and in a way that like users are used to in a modern application. Yeah, so like at a very high level, Blitz are the abbreviation of the UI states. We got blank states, we got loading state, error state, expected state, disabled state and a very special S at the end for static state, which is part of like static rendering that we use very often at SEEK.

**Elliott** (3:41)
So those states are kind of the way we would describe the application state goes through at various points throughout the user journey. So you said static, and from my understanding, if we're talking about front ends, right, you get this static generated code usually from a single page app that gets kind of served up first. So is that what we're referring to when we say static?

**Eddy Nguyen** (4:03)
Yeah, that's correct. That's basically the first order index.html that gets sent over the wire before any of the application functionalities kicked in, right? So a lot of the time, you see that when you load a page, it's going to be like a lot of skeleton loader, like kind of shimmering effect. And without any date about who the user is or anything related with login or basically the state without any information. However, it kind of gives the user a glimpse of what the application may look like once it's finished loading all the initial functionalities. So when that happens, we don't want the UI to jank or a lot too much, like to move around excessively so that the users will still have a very good experience.
Because they kind of expect something will pop up in those loading placeholders.

**Elliott** (5:09)
Yeah, I've certainly seen a lot of janky UIs over the years where there'll be a loading animation and then boom, suddenly you kind of get punched in the face with content that loads. So the static state really is kind of synonymous with like a skeleton loading pattern then?