Gatsby: [www/showcase] Improve shadow indicating overscroll

[ryanditjia]

The shadow on the right side (indicating there are more content to the right) of https://next.gatsbyjs.org/showcase is currently static and could use an improvement.

For example: the implementation of https://cssreference.io/property/align-content/ (scroll the left sidebar) is close to ideal.

[fk]

Not sure what you referring to—the white-to-transparent linear gradient of the "Featured Sites" component horizontal scroller or (which I suppose) the sidebar to the _left_ containing the filter category accordion?

<3 to have a sidebar behavior similar to cssreference.io for the site showcase filter sidebar as well as for the docs/features/tutorial sidebar!

[ryanditjia]

Tinkered with implementing how cssreference.io does it. But since it requires using React ref (to get element’s scrollTop, scrollLeft, offsetHeight, scrollHeight, etc), plus needing to add container scroll listener + window resize listener, it ended up being unmaintainable. Also it didn’t work with horizontal scrolling.

This PR uses CSS-only solution taken from here. It adds overflow shadows to the category filter accordion.

There are quirks to this solution, but they aren’t apparent when implemented here, and I think it looks good!

Will try it on Featured Sites next. Leaving this issue open for now.

[ryanditjia]

Hi @fk. With introduction of React Hooks, I decided to try to solve this once more. Once React Hooks is officially out, and Gatsby supports it (for some reason, I couldn’t make Hooks work with Gatsby).

Demo: https://gatsby-6735.netlify.com
Source: https://github.com/ryanditjia/playing-with-react-hooks

There are plenty of abstraction opportunities, but I’ll leave this here for now.

[fk]

Hey @ryanditjia! It's so cool to see you haven't forgotten about this! 🤗 🙏

I'm a hopeful noob when it comes to React-land, but even I've managed to hear about React Hooks. 😋

That enabled me to not only overhear but also remember a conversation among @jlengstorf and @KyleAMathews talking about them not working in Gatsby—Jason even has a simple example repo up at https://github.com/jlengstorf/gatsby-with-hooks. TL;DR: The issue seems to be an upstream one in react-hot-loader if I got things right: https://github.com/gaearon/react-hot-loader/issues/1088

[jlengstorf]

@ryanditjia @fk a fix was found for Hooks and hot module reloading.

See https://github.com/gatsbyjs/gatsby/issues/9489#issuecomment-434868882 for details. I've updated https://github.com/jlengstorf/gatsby-with-hooks so it's working now as well.

[ryanditjia]

Thanks! I was also able to make it work by wrapping the component with React.memo.

I will send a PR once React Hooks is finalized. Hopefully by then there will be a permanent fix to this issue.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!