Add a spinner or progress marker of some kind to the search results

[mlissner]

It'd be fun to do something fancy, but we probably don't have time to get it right.

Nevertheless, ideas include:

• Animate our new CL logo somehow to show a weighing of the scales or something.
• Show messages to the users to educate them about the system or about FLP or both. This seems hard because users wouldn't have enough time to read longer things, so we'd be inclined to make search slower. That's no good.
• Remove the search results and just show a loading document gif like lots of other sites use these days (see Kayak, for example).
• Show a horizontal line across the top like Github does
• Remove the research results and show a medium-size spinner like we do in financial disclosures when switching tabs
• Just gray out the search buttons and put spinners in them.

Probably we should just do the last thing, or maybe the last two things, but it'd be fun to do more.

Back in https://github.com/freelawproject/courtlistener/issues/4209#issuecomment-2285130213, we decided the spinner could wait until HTMX, but I agree that we should do it.

[mlissner]

Assigning to Eduardo, because he just did a spinner for the CSV feature, and because he has https://github.com/freelawproject/recap/issues/361 on his backlog as well. I guess he's our spinner guy.

[ERosendo]

I've been experimenting with different spinner options for our search interface, based on the ideas you provided.

As a first step, I've implemented the grayed-out button with spinners approach. Here are a few GIFs showcasing how this might look:

Search bar in the homepage template


Search button in the results page


Search button in the sidebar filters template


I also tried an option where the button remains active while the spinner is displayed. Here are GIFs demonstrating that:

Search bar in the homepage template


Search button in the results page


Search button in the sidebar filters template


Additionally, I experimented with removing the search results and displaying a medium-sized spinner. Here's a GIF showcasing this option:

[mlissner]

These look great, except for the one where the button doesn't get grayed out. I think that'd be a mistake, since it'd encourage people to click it a second time (and start things over). I assume you're using the disabled state for the button when you do this?

I think if we only did the spinner(s) that'd help folks a ton. I'm curious to see your HTMX progress bar solution next. What libraries are you looking at for that?

[ERosendo]

I assume you're using the disabled state for the button when you do this?

You're right! In #2331, we introduced a new HTMX extension called loading-states. This extension enhances user experience by controlling element behavior while a request is in flight. One key feature is the ability to disable specific HTML elements using the data-loading-disable attribute.

I'm curious to see your HTMX progress bar solution next. What libraries are you looking at for that?

I noticed GitHub is using Turbo's progress bar component and decided to adopt a similar approach for our application. Their progress bar is a simple <div> element with the class turbo-progress-bar (you can see the code for reference: code). and we can use HTMX events to achieve a similar effect without introducing additional dependencies. Here's the plan:

• We'll use htmx:beforeRequest to trigger the progress bar display when a request begins, and htmx:beforeSwap to hide it once the content is successfully replaced.
• We'll define a custom CSS class that mirrors the functionality of turbo-progress-bar. Additionally, a minimal amount of JavaScript will be implemented to manage the progress bar's updates.

[ERosendo]

@mlissner Here's a visual experiment to show the progress bar in action. I slowed down the internet so you can see it working. I tried the regular blue one and then experimented with a red bar that matched the CL logo color.

---

Let me know what you think.

[mlissner]

That red looks pretty danged good. Should we be implementing the progress bar in a way that it can easily be used by other htmx features?

[ERosendo]

Should we be implementing the progress bar in a way that it can easily be used by other htmx features?

Absolutely! The goal is to create a reusable JavaScript module that encapsulates both the logic and styling of the progress bar. This will allow us to seamlessly integrate progress bars into our HTMX requests, similar to how the loading-states extension works, enhancing the user experience.