Skip to content

Commit ec1eb88

Browse files
update async component docs with feedback from RUG-N 17.06.2019
1 parent 39d19a3 commit ec1eb88

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

docs/components/async.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Show [specs](../../spec/usage/components/async_spec.rb)
44

55
As the name suggests, the async component allows us to let our components behave asynchronously!
66

7+
Please be aware that, if not configured otherwise, the async core component does get loaded and displayed on initial pageload!
8+
79
## Parameters
810

911
The async core component accepts the following parameters:
@@ -20,6 +22,36 @@ async rerender_on: 'my_event' do
2022
end
2123
```
2224

25+
**Attention:** The `rerender_on` option lets you rerender parts of your UI asynchronously, which is cool. It does come with an implications that could lead to unintended behaviour, though. Take a look at the code below:
26+
27+
```ruby
28+
class Pages::ExamplePage < Page::Cell::Page
29+
30+
def prepare
31+
user = User.last
32+
end
33+
34+
# ...
35+
36+
def response
37+
components {
38+
async rerender_on: 'my_event' do
39+
div id: 'my-div' do
40+
plain user.name
41+
end
42+
end
43+
}
44+
end
45+
46+
end
47+
```
48+
49+
Firstly, the async component gets displayed on initial pageload, showing the most recently added user's name. On every occurance of `my_event`, the `prepare` method gets called, again fetching the most recently added user from the DB. This could lead to 1) unwanted information on the UI adn 2) a lot of unnecessary DB queries. We recommend to keep a close eye on the async component and, for this example, calling a partial with the DB query within the `div id: 'my-div'`.
50+
51+
If you want _lazy loading_, e.g. not fetching the latest user from the DB on pageload but fetching them asynchronously later on, the async core component is currently being enhanced with a `defer: true` configuration, visible [here](https://github.com/basemate/matestack-ui-core/issues/58).
52+
53+
If you want to load the user name on pageload, initially hide it and display it later on, read below as this option (`show_on`) is already implemented!
54+
2355
### Show_on
2456

2557
The `show_on` option lets us define an event on which the component gets shown.

0 commit comments

Comments
 (0)