Bug: search results timeout causes page to go white

[adnanjpg]

Describe the bug

when searching for a repository in the homepage, sometimes I get a result and the other times the page goes full white.

here's the error that's triggering the white page:

react-dom.production.min.js:189 TypeError: Cannot read properties of null (reading 'length')
    at bK (Hero.tsx:117:26)
    at Lf (react-dom.production.min.js:167:137)
    at Kl (react-dom.production.min.js:197:258)
    at im (react-dom.production.min.js:292:88)
    at am (react-dom.production.min.js:280:389)
    at s0 (react-dom.production.min.js:280:320)
    at ki (react-dom.production.min.js:280:180)
    at iu (react-dom.production.min.js:271:88)
    at tm (react-dom.production.min.js:268:429)
    at z (scheduler.production.min.js:13:203)
Yl @ react-dom.production.min.js:189
Fy.r.callback @ react-dom.production.min.js:189
wp @ react-dom.production.min.js:144
Dp @ react-dom.production.min.js:262
em @ react-dom.production.min.js:260
n0 @ react-dom.production.min.js:259
c0 @ react-dom.production.min.js:283
kn @ react-dom.production.min.js:281
tm @ react-dom.production.min.js:269
z @ scheduler.production.min.js:13
B @ scheduler.production.min.js:14

when I investigated further, turns out the call going to supabase from src/components/Hero.tsx, triggering fetchRecommendations from src/lib/supabase.ts is timing out and thus returning null, and as there's no null check in src/components/Hero.tsx, results are set to null, which triggers an error a few lines later when results.length is called, which causes the page to go white

a temporary solution would be to implement a null handling and a retry mechanism on the supabase calls.

but as I went further and set the Network property to Slow 3G in the Performance tab in the developer console, I had all my requests failing. setting it to Fast 3G makes the first call work, but the second one failes. so I believe a more permanent solution would be to reconfigure the timeout

Steps to reproduce

Reproduce 1:

1. go to https://hot.opensauced.pizza/
2. open the developer console, navigate to the Performance tab, set the Network property to Slow 3G
3. now in the page, click on the Search Repositories field and type rust
4. you will see in a few seconds the page going white

Reproduce 2:

1. go to https://hot.opensauced.pizza/
2. open the developer console, navigate to the Performance tab, set the Network property to Fast 3G
3. now in the page, click on the Search Repositories field and type rust
4. you most probably will see results appearing
5. now clear the field and type dart
6. you will see in a few seconds the page going white

Browsers

Other (add additional context)

Additional context (Is this in dev or production?)

production, using the Arc browser (arc.net)

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[adnanjpg]

.take

[github-actions]

Thanks for taking this on! If you have not already, join the conversation in our Discord

[bdougie]

Wow thanks for catching this @adnanjpg