Class: ReactiveRecord::WhileLoading

Inherits:
Object
  • Object
show all
Includes:
Hyperloop::Component::Mixin, React::IsomorphicHelpers
Defined in:
lib/reactive_record/active_record/reactive_record/while_loading.rb

Overview

To notify React that something is loading use React::WhileLoading.loading! once everything is loaded then do React::WhileLoading.loaded_at message (typically a time stamp just for debug purposes)

Class Method Summary collapse

Instance Method Summary collapse

Methods included from Hyperloop::Component::Mixin

#component_did_mount, #component_did_update, #original_component_did_mount, #original_component_did_update, #reactive_record_link_set_while_loading_container_class, #reactive_record_link_to_enclosing_while_loading_container

Class Method Details

.add_style_sheet ⇒ Object 



150
151
152
153
154
155
156
157
158
159
160
161
162
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 150

def add_style_sheet
  # directly assigning the code to the variable triggers a opal 0.10.5 compiler bug.
  unless @style_sheet_added
    %x{
      var style_el = document.createElement("style");
      style_el.setAttribute("type", "text/css");
      style_el.innerHTML = ".reactive_record_is_loading > .reactive_record_show_when_loaded { display: none; }\n" +
                           ".reactive_record_is_loaded > .reactive_record_show_while_loading { display: none; }";
      document.head.append(style_el);
    }
    @style_sheet_added = true
  end
end

.get_next_while_loading_counter ⇒ Object 



86
87
88
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 86

def self.get_next_while_loading_counter
  @while_loading_counter += 1
end

.has_observers? ⇒ Boolean

Returns:

  • (Boolean) 


94
95
96
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 94

def self.has_observers?
  React::State.has_observers?(self, :loaded_at)
end

.loaded_at(loaded_at) ⇒ Object 



131
132
133
134
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 131

def loaded_at(loaded_at)
  React::State.set_state(self, :loaded_at, loaded_at)
  @is_loading = false
end

.loading! ⇒ Object 



123
124
125
126
127
128
129
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 123

def loading!
  React::RenderingContext.waiting_on_resources = true
  React::State.get_state(self, :loaded_at)
  # this was moved to where the fetch is actually pushed on to the fetch array in isomorphic base
  # React::State.set_state(self, :quiet, false)
  @is_loading = true
end

.loading? ⇒ Boolean

Returns:

  • (Boolean) 


119
120
121
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 119

def loading?
  @is_loading
end

.page_loaded? ⇒ Boolean

Returns:

  • (Boolean) 


140
141
142
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 140

def page_loaded?
  React::State.get_state(self, :page_loaded)
end

.preload_css(css) ⇒ Object 



90
91
92
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 90

def self.preload_css(css)
  @css_to_preload += "#{css}\n"
end

.quiet! ⇒ Object 



144
145
146
147
148
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 144

def quiet!
  React::State.set_state(self, :quiet, true)
  after(1) { React::State.set_state(self, :page_loaded, true) } unless on_opal_server? or @page_loaded
  @page_loaded = true
end

.quiet? ⇒ Boolean

Returns:

  • (Boolean) 


136
137
138
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 136

def quiet?
  React::State.get_state(self, :quiet)
end

Instance Method Details

#render ⇒ Object 



203
204
205
206
207
208
209
210
211
212
213
214
 
# File 'lib/reactive_record/active_record/reactive_record/while_loading.rb', line 203

def render
  props = params.element_props.dup
  classes = [props[:class], props[:className], "reactive_record_while_loading_container_#{@uniq_id}"].compact.join(" ")
  props.merge!({
    "data-reactive_record_while_loading_container_id" => @uniq_id,
    "data-reactive_record_enclosing_while_loading_container_id" => @uniq_id,
    class: classes
  })
  React.create_element(params.element_type[0], props) do
    params.loaded_children + params.loading_children
  end.tap { |e| e.waiting_on_resources = params.loading }
end