Documentation examples are unusably slow

[ryanvanderpol]

I really enjoy using UI Kitten, but since I've only been using it for a few weeks I find that I need to refer to the documentation a lot, and that's a problem: the examples are absolutely unusably slow. The Button examples take 20+ seconds to render. And during the time that it's loading the code tab (<>) isn't accessible, so I have to sit there and wait for it to finish loading before I can see any code samples.

Great library, great documentation, but the use of these React Native Web examples in the documentation make me want to throw the whole thing away and use a different library.

[lesmo]

I thought it was just me, I'd call myself somewhat of an "advanced" user. Typescript autocomplete and code exploring helps a lot, so I rarely go for the docs... but yeah, I've noticed this too since the release of v5 (although in beta). I use Brave Browser and haven't tested others, I assumed Brave was blocking something in the docs that slowed it down.

Sadly you probably can't switch back to v4 docs because there's a few API changes that are completely incompatible with v5+, and since you're a new user you're probably using v5...

[artyorsh]

@ryanvanderpol thanks for the feedback. Thats the payment for having clickable examples.
Our docs run Angular, and to run clickable examples inside it - in general, it runs a small RNW app inside iframe for each example.
I don't know possible ways to optimize, because I'm not familiar with Angular. However, I can discuss it with our web team.

[artyorsh]

@lesmo comparing to v4, v5 has much more examples, plus some developer notes for each example. It just became meaningful in this version. But with annoying performance issues.

[ryanvanderpol]

Gotcha. It's a real annoyance for me, and I assume many others, and to be honest, I don't really see what the value is in clickable examples. This library is very basic: it's just buttons, lists, icons, menus, etc. The only thing I care about is the syntax and properties. I don't need you to prove to me that I can click a button.

[artyorsh]

@ryanvanderpol

I don't really see what the value is in clickable examples.

Well, that's yours opinion. But I believe that having it is much better than having nothing or having images. It is the first experience for users who look for the possible solutions.

The only thing I care about is the syntax and properties.

There is an API tab for each component. Plus I totally agree with @lesmo that typescript helps a lot. You may just go to the source code to see the definitions without an extra need to open documentation.

However, if not having live examples is not a problem for you, I would suggest looking through this folder

[lesmo]

Gotcha. It's a real annoyance for me, and I assume many others, and to be honest, I don't really see what the value is in clickable examples. This library is very basic: it's just buttons, lists, icons, menus, etc. The only thing I care about is the syntax and properties. I don't need you to prove to me that I can click a button.

The problem with that particular approach is that this library is updating pretty frequently, and using images could make updating the docs quite inefficient. I'm not sure if there's a way to automate that...

@lesmo comparing to v4, v5 has much more examples, plus some developer notes for each example. It just became meaningful in this version. But with annoying performance issues.

That's kinda terrible. I think it could make the library be perceived as slow.

I suffered performance issues when using react-navigation v4 with rather complex views (top navigation, list view, buttons, images, menus, etc in around three screens), which is kinda' comparable to the many examples per component page in the docs. The problem with react-navigation is that before v5 all the screens in the stack are always in memory and being executed, so there's a lot of components at the same time - v5 solves that by using react-native-screens... so perhaps a lazy loading of the examples could help? Showing the code first and then showing the example after clicking on the live tab?

[artyorsh]

@lesmo thanks for the explanation. Do you have an experience running react-native-screens in web? Would like to try it if it works, but I'm not really sure this is a core of the problem.

[artyorsh]

@lesmo yep, that helps. I also used splitting some examples for a particular component to a separate tabs in the documentation. Thanks for taking a part in the discussion, this will be closed with release of v5 stable.

[lesmo]

@lesmo thanks for the explanation. Do you have an experience running react-native-screens in web? Would like to try it if it works, but I'm not really sure this is a core of the problem.

Not directly, though. I just implemented it in a past project through react-navigation, immediately you can "feel" it's faster. I don't think it would help under react-native-web because on Web there's no real concept or feature of "native screen" component, so components on previous screens remain "rendered".

@lesmo yep, that helps. I also used splitting some examples for a particular component to a separate tabs in the documentation. Thanks for taking a part in the discussion, this will be closed with release of v5 stable.

My pleasure!