added async defer docs

Author: jonasjabari

docs/components/async.md

@@ -64,6 +64,73 @@ async hide_after: 1000 do
 end
 ```
 
+### 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.
+```ruby
+async defer: true 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 `2000ms` after initial page load is done.
+```ruby
+async defer: 2000 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!
+
+```ruby
+#...
+async defer: 1000 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 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.
+
+#### defer used with show_on and hide_on
+You can trigger the deferred GET request base on a client-side event fired by an `onclick` component for example.
+
+```ruby
+onclick emit: "my_event" do
+  button text: "show"
+end
+onclick emit: "my_other_event" do
+  button text: "hide"
+end
+async defer: true, show_on: "my_event", hide_on: "my_other_event" do
+  div id: 'my-div' do
+    plain 'I will be requested within a separate GET request right after "my_event" is fired'
+  end
+end
+```
+Everytime the `async` section gets shown, the content of the `async` component gets freshly fetched from the server!
+
 ## Examples
 
 See some common use cases below:
@@ -183,3 +250,22 @@ page.execute_script('MatestackUiCore.matestackEventHub.$emit("my_event", { messa
 ```
 
 As a result, the event message gets shown _after_ our event was fired!
+
+### Example 6: 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
+    components {
+      async defer: true 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