Loading component between tab activated and fade in

[dan-fein]

Even before the feature request I feel obligated to just commend the work of @PedroBern, @andreialecu , and @alexpchin. I'm using rc 2 and it's fantastic. Now with conditional rendering of tabs this is a really great package. Great work to you both!

Feature request

The ability to set a component to show on-click of an inactive Lazy tab, before the fade starts.

Current behavior

On-click of a new tab that has been wrapped in <Tabs.Lazy> there's a really pleasant fade in, but a slight delay between when that fade actually starts. I would love to show a loading component (probably a GIF at the end of the day). Just based on there being a slight delay when a fade comes in.

Screenshots (if applicable)

This would look something like:

https://user-images.githubusercontent.com/1616865/107581686-7248c380-6bc6-11eb-84fa-e9e1d7bea296.MP4

[alexpchin]

I also feel obligated to say that I've hardly contributed... apart from perhaps throwing problems over to @PedroBern and @andreialecu 🤦🏻‍♂️ Lol

[PedroBern]

@danielfein thanks 🎉 @alexpchin Lol keep coming with the issues, it can only get better👍

Eventually, we will allow passing a placeholder component to the Tabs.Container. Should be really easy to add it to the package, if you want to come up with something, PRs are welcome 🙌

Basically, we just need to render the placeholder inside the empty scrollview of the Lazy. But, there is a caveat, to have it centered (if desired), we need to interpolate with the scroll position (similar to what I mentioned on #117)

[andreialecu]

We discussed this a bit and I think that if this were to be implemented in the package, it wouldn't really be flexible enough.

Luckily though, implementing this on the application end of things should be extremely easy once #121 lands.

Do not use lazy, but instead hook into useFocusedTab().

Your component can then just detect if it's focused and start its loading then. You can also create a wrapper component of your own.

Rough example:

export const Albums: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState(false)

  const focusedTab = useFocusedTab()

  const startLoading = useCallback(() => { setTimeout(() => setIsLoaded(true), 3000) }, [])

  if (focusedTab === 'albums' && !isLoaded) {
    startLoading()
    return <SomeLoadingView /> // use something like https://github.com/chramos/react-native-skeleton-placeholder
  }

  return (
    <Tabs.ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
    >
      <AlbumsContent />
    </Tabs.ScrollView>
  )
}