Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Parameters
  • ID (required)
  • Rerender_on (optional)
  • Defer
  • DOM structure, loading state and animations
  • Examples
  • Example 1 - Rerender on event
  • Example 2: Deferred loading

Was this helpful?

Edit on GitHub
  1. Components API
  2. Reactive Core Components

Async

The async component enables us to rerender parts of the UI based on events without full page reload.

Please be aware that, if not configured otherwise, the async core component does get loaded and displayed on initial pageload!

Parameters

The async core component accepts the following parameters:

ID (required)

The async component needs an ID in order to resolve the correct content on an async HTTP request

async id: "some-unique-id" do
  #...
end

Rerender_on (optional)

The rerender_on option lets us define an event on which the component gets rerendered.

async rerender_on: 'my_event', id: "some-unique-id" do
  div id: 'my-div' do
    plain "#{DateTime.now.strftime('%Q')}"
  end
end

Note: The rerender_on option lets you rerender parts of your UI asynchronously. But please consider that, if not configured differently, it

a) is not lazily loaded and

b) and does get displayed on initial pageload

by default.

You can pass in multiple, comma-separated events on which the component should rerender.

async rerender_on: 'my_event, some_other_event', id: "some-unique-id"

Defer

The defer option may be used in two ways:

simple defer

defer: true implies that the content of the async component gets requested within a separate GET request right after initial page load is done.

async defer: true, id: "some-unique-id"do
  div id: 'my-div' do
    plain 'I will be requested within a separate GET request right after initial page load is done'
  end
end

delayed defer

defer: 2000 means that the content of the async component gets requested within a separate GET request 2000 milliseconds after initial page load is done.

async defer: 2000, id: "some-unique-id" do
  div id: 'my-div' do
    plain 'I will be requested within a separate GET request 2000ms after initial page load is done'
  end
end

The content of an async component with activated defer behavior is not resolved within the first page load!

#...
async defer: 1000, id: "some-unique-id" do
  some_database_data = SomeModel.some_heavy_query
  div id: 'my-div' do
    some_database_data.each do |some_instance|
      plain some_instance.id
    end
  end
end
async defer: 2000, id: "some-unique-id" do
  some_other_database_data = SomeModel.some_other_heavy_query
  div id: 'my-div' do
    some_other_database_data.each do |some_instance|
      plain some_instance.id
    end
  end
end
#...

The SomeModel.some_query does not get executed within the first page load and only will be called within the deferred GET request. This helps us to render a complex UI with loads of heavy method calls step by step without slowing down the initial page load and rendering of simple content.

DOM structure, loading state and animations

Async components will be wrapped by a DOM structure like this:

<div class="matestack-async-component-container">
  <div class="matestack-async-component-wrapper">
    <div class="matestack-async-component-root" >
      hello!
    </div>
  </div>
</div>

During async rendering a loading class will automatically be applied, which can be used for CSS styling and animations:

<div class="matestack-async-component-container loading">
  <div class="matestack-async-component-wrapper loading">
    <div class="matestack-async-component-root" >
      hello!
    </div>
  </div>
</div>

Examples

See some common use cases below:

Example 1 - Rerender on event

On our example page, we wrap a simple timestamp in an async component and tell it to rerender when the event my_event gets triggered.

class ExamplePage < Matestack::Ui::Page

  def response
    async rerender_on: 'my_event', id: "some-unique-id" do
      div id: 'my-div' do
        plain "#{DateTime.now.strftime('%Q')}"
      end
    end
  end

end

Not surprisingly, the timestamp gets updated after our event was fired!

Example 2: Deferred loading

On our example page, we wrap our async event around a placeholder for the event message.

```ruby class ExamplePage < Matestack::Ui::Page

def response async defer: true, id: "some-unique-id" do div id: 'my-div' do plain 'I will be requested within a separate GET request right after initial page load is done' end end end

end

PreviousActionNextCable

Last updated 3 years ago

Was this helpful?

Lazy (or defered) loading can be configured like shown .

here