Fix load on enter

[AbhiramTadepalli]

Overview

After https://github.com/UTDNebula/utd-trends/pull/298/files, since searching is initiated quicker, user feels some lag while waiting for search results

What Changed

Set the loading state quicker, and add a loading icon in the search button

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
utd-trends	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2025 4:54am

[AbhiramTadepalli]

I am calling setSearchResultsLoading() inside the useEffect that has searchResultsLoading as a dependency. Is this bad practice?

[AbhiramTadepalli]

I don't really like the solution. It works but it introduces an unnecessary state I feel like combining it with results.state is probable better but idk how to fully.

[AbhiramTadepalli]

Another problem:

On search from landing page to dashboard, it calls DashboardEmpty and then DashboardError before the searchResultsTable Skeletons

If I modify:

    contentComponent = <DashboardEmpty />;```
and Remove the DashboardError elseif, then for a second, it shows the "No Results" state from searchResultsTable.tsx

Ideally:
Initiate search from landing -> directly shows srt's loading state, nothing in between

[TyHil]

Can revert but lmk what you think of these changes to use results.state and remove the flashing DashboardError and DashboardEmpty.

Opinion: I don't feel the spinner in the search bar is all that necessary when the whole page changes to a loading state.

Current issue (possibly unsolvable): There's also an issue when reloading/opening the dashboard (but not when navigating to it from the homepage) where the searchResultsTable and RHS cards flash white. I seems this is just in the split second before CSS is loaded but it is odd

[TyHil]

Opinion: I don't feel the spinner in the search bar is all that necessary when the whole page changes to a loading state.

nvm the spinners grown on me

Current issue (possibly unsolvable): There's also an issue when reloading/opening the dashboard (but not when navigating to it from the homepage) where the searchResultsTable and RHS cards flash white. I seems this is just in the split second before CSS is loaded but it is odd

solved via a new MUI feature

the topMenu does still jump around because CSS seems to be rendering it as mobile first and it doesn't update until JS is run. there might be a css solution

[TyHil]

the topMenu does still jump around because SSR seems to be rendering it as mobile first because of the media query it uses. there might be a css solution

solved! turns out using an actual media query instead of useMediaQuery fixes this. Probably since CSS is faster than JS

[AbhiramTadepalli]

• Do not search when user clicks on an autocomplete suggestion
• If you type out cs 1200, space, cs2337, space, clicking enter does not search

[AbhiramTadepalli]

Everything else works perfectly. Searches appear faster because there is less lag in between and code-wise it's very simple

[TyHil]

Do not search when user clicks on an autocomplete suggestion
If you type out cs 1200, space, cs2337, space, clicking enter does not search

I think #298 caused both of these issues as they are present on that PR, dev, and prod.

[AbhiramTadepalli]

nice! So are all the breakpoints local to each component now?

[AbhiramTadepalli]

Do not search when user clicks on an autocomplete suggestion

On the landing page this works as intended. The problem is only with the searchbar on dashboard scratch that same behavior on both, both search when user clicks on a suggestion

[AbhiramTadepalli]

searchbar.tsx is very convoluted

So I:

• removed anything associated with 'onChange' for the manageQuery prop

[AbhiramTadepalli]

If you type out cs 1200, space, cs2337, space, clicking enter does not search

I think #298 caused both of these issues as they are present on that PR, dev, and prod.

Fixed this, you were right @TyHil

[AbhiramTadepalli]

[ ] Do not search when user clicks on an autocomplete suggestion

For this, I think we should leave the current behavior as-is so it the same as clicking ENTER on an autocomplete suggestion

[AbhiramTadepalli]

There is some issue when I click enter twice for the same search terms without change, it just perpetually loads. I think this will be ready for review after I fix that, and map out how searchBar.tsx works

[AbhiramTadepalli]

My fix prevents the search when the terms haven't changed. No need for another batch of API calls imo (and if they really want, they can refresh).

Also I'd have to change a few things so that the useEffect triggers properly and all that. Don't think it is needed.

[AbhiramTadepalli]

Searchbar action flows:
// updateValue -> onSelect_internal -> updateQueries - clicking enter on an autocomplete suggestion in topMenu Searchbar
// updateValue -> onSelect_internal -> onSelect (custom function) - clicking enter on an autocomplete suggestion in home page SearchBar
// params.inputProps.onKeyDown -> handleKeyDown -> onSelect_internal -> updateQueries/onSelect - clicking enter in the SearchBar
// Button onClick -> onSelect_internal -> updateQueries/onSelect - Pressing the "Search" Button

@TyHil if you want me to put the comments somewhere else instead lmk.

[AbhiramTadepalli]

Can you check if the spinner is colored correctly in dark mode? It was before idr which commit changed it, but you did some fancy stuff w colors so I don't want to mess that up iirc