In theory, UI should always reflect the correct state.<\/p>\n\n\n\n
In practice, that\u2019s not always the best user experience.<\/p>\n\n\n\n
I recently worked on what seemed like a small issue\u2014a login\/logout button flickering between \u201cLog in\u201d<\/strong> and \u201cLog out.\u201d<\/strong> But it turned into a deeper discussion about performance, correctness, and what actually matters in user experience.<\/p>\n\n\n\n We had a header button that showed:<\/p>\n\n\n\n But on page load, it briefly showed the wrong state.<\/p>\n\n\n\n Why?<\/p>\n\n\n\n Because authentication was resolved on the client.<\/p>\n\n\n\n The sequence looked like this:<\/p>\n\n\n\n On a fast connection, this flicker is barely noticeable.<\/p>\n\n\n\n On a slow connection? The obvious solution was:<\/p>\n\n\n\n Don\u2019t render the button or disable the button until we know the auth state.<\/p>\n<\/blockquote>\n\n\n\n Technically, this gives you correct UI.<\/p>\n\n\n\n But it introduces a new problem:<\/p>\n\n\n\n So the question became:<\/p>\n\n\n\n Are we optimizing for correctness\u2014or usability?<\/p>\n<\/blockquote>\n\n\n\n At this point, the obvious \u201cperfect\u201d solution was:<\/p>\n\n\n\n Render the correct auth state on the server.<\/p>\n<\/blockquote>\n\n\n\n In theory, that would eliminate the flicker entirely.<\/p>\n\n\n\n We even explored it.<\/p>\n\n\n\n The idea was to convert the header into a server component<\/strong> so we could read authentication state (via cookies) during SSR and render the correct UI immediately.<\/p>\n\n\n\n But in practice, it wasn\u2019t that simple.<\/p>\n\n\n\n We considered passing auth state down as props from the server.<\/p>\n\n\n\n But that introduced a bigger issue:<\/p>\n\n\n\n Every consuming application would now need to manually handle authentication state and integrate with our auth provider.<\/p>\n<\/blockquote>\n\n\n\n That\u2019s not a small change\u2014that\u2019s a platform-level shift.<\/p>\n\n\n\n Someone pointed out something that shifted the conversation:<\/p>\n\n\n\n Any client-side solution doesn\u2019t remove the delay. It just hides it.<\/p>\n<\/blockquote>\n\n\n\n That forced us to rethink the goal.<\/p>\n\n\n\n Instead of asking:<\/p>\n\n\n\n \u201cHow do we make the UI always correct?\u201d<\/p>\n<\/blockquote>\n\n\n\n We asked:<\/p>\n\n\n\n \u201cWhat actually happens if the UI is temporarily wrong?\u201d<\/p>\n<\/blockquote>\n\n\n\n We changed the button from a pure action to a link to the login page<\/strong>.<\/p>\n\n\n\n And we let the login page handle the logic.<\/p>\n\n\n\n Now:<\/p>\n\n\n\n Meanwhile:<\/p>\n\n\n\n We shifted our priority:<\/p>\n\n\n\n Guarantee correct UI immediately<\/strong><\/p>\n\n\n\n Guarantee correct behavior always<\/strong><\/p>\n\n\n\n That distinction matters.<\/p>\n\n\n\n Because from the user\u2019s perspective:<\/p>\n\n\n\n But in exchange, we get:<\/p>\n\n\n\n This wasn\u2019t really about a login button.<\/p>\n\n\n\n It was about how we think as engineers.<\/p>\n\n\n\n It\u2019s easy to chase:<\/p>\n\n\n\n But real systems operate under constraints:<\/p>\n\n\n\n The better question is:<\/p>\n\n\n\n What\u2019s the worst outcome if this is temporarily wrong?<\/p>\n<\/blockquote>\n\n\n\n In our case:<\/p>\n\n\n\n A redirect that resolves instantly<\/p>\n<\/blockquote>\n\n\n\n That\u2019s a safe failure.<\/p>\n\n\n\n Not every problem needs to be solved at the UI layer.<\/p>\n\n\n\n Sometimes the better solution is to make the system forgiving<\/strong> instead of perfect<\/strong>.<\/p>\n\n\n\n Because users don\u2019t care if your state is technically correct at every millisecond.<\/p>\n\n\n\n They care that things work<\/strong>.<\/p>\n\n\n\n <\/p>\n\n\n\n Welcome to my Engineering Lab\u2014where small bugs turn into better systems thinking<\/strong>.<\/p>\n\n\n\n In theory, UI should always reflect the correct state. In practice, that\u2019s not always the…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-engineering-lab"],"_links":{"self":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":1,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=\/wp\/v2\/posts\/32\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vanianettleford.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\n\n\nThe Problem<\/h2>\n\n\n\n
\n
\n
It could take up to twenty seconds in some cases<\/p>\n\n\n\n
\n\n\n\nThe Initial Instinct: Fix the UI<\/h2>\n\n\n\n
\n
\n
\n
\n\n\n\nWhy We Didn\u2019t Solve This on the Server<\/h2>\n\n\n\n
\n
The Constraints<\/h3>\n\n\n\n
\n
\n
\n\n\n\nA Key Insight<\/h2>\n\n\n\n
\n
\n
\n
\n\n\n\nThe Solution: Optimize for Behavior<\/h2>\n\n\n\n
\n
\n
\n\n\n\nWhy This Works<\/h2>\n\n\n\n
Before<\/h3>\n\n\n\n
After<\/h3>\n\n\n\n
\n
\n\n\n\nTradeoffs We Accepted<\/h2>\n\n\n\n
\n
\n
\n\n\n\nEngineering Is About Constraints<\/h2>\n\n\n\n
\n
\n
\n
\n
\n\n\n\nFinal Thought<\/h2>\n\n\n\n
\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"