hyper-model 1.0.alpha1.1 → 1.0.alpha1.6

data/lib/reactive_record/active_record/reactive_record/lookup_tables.rb

@@ -14,15 +14,15 @@ module ReactiveRecord
     end
 
     def waiting_for_save(model)
-      @waiting_for_save[model]
+      @waiting_for_save[model.base_class]
     end
 
     def wait_for_save(model, &block)
-      @waiting_for_save[model] << block
+      @waiting_for_save[model.base_class] << block
     end
 
     def clear_waiting_for_save(model)
-      @waiting_for_save[model] = []
+      @waiting_for_save[model.base_class] = []
     end
 
     def lookup_by_object_id(object_id)
@@ -33,8 +33,8 @@ module ReactiveRecord
       `#{@records_by_object_id}[#{record.object_id}] = #{record}`
     end
 
-    def lookup_by_id(*args) # model and id
-      `#{@records_by_id}[#{args}]` || nil
+    def lookup_by_id(model, id) # model and id
+      `#{@records_by_id}[#{[model.base_class, id]}]` || nil
     end
 
     def set_id_lookup(record)

data/lib/reactive_record/active_record/reactive_record/operations.rb

@@ -12,6 +12,10 @@ module ReactiveRecord
 
       FORMAT = '0x%x'
 
+      class << self
+        attr_accessor :last_response_sent_at
+      end
+
       def self.serialize_params(hash)
         hash['associations'].each do |assoc|
           assoc['parent_id'] = FORMAT % assoc['parent_id']
@@ -38,6 +42,7 @@ module ReactiveRecord
         response[:saved_models].each do |saved_model|
           saved_model[0] = FORMAT % saved_model[0]
         end if response.is_a?(Hash) && response[:saved_models]
+        response[:sent_at] = Time.now.to_f
         response
       end
 
@@ -45,6 +50,7 @@ module ReactiveRecord
         response[:saved_models].each do |saved_model|
           saved_model[0] = saved_model[0].to_i(16)
         end if response.is_a?(Hash) && response[:saved_models]
+        Base.last_response_sent_at = response.delete(:sent_at)
         response
       end
     end
@@ -65,8 +71,9 @@ module ReactiveRecord
         ]
       end
       failed do |e|
-        # AccessViolations are already sent to on_error
-        Hyperstack.on_error(e, :fetch_error, params.to_h) unless e.is_a? Hyperstack::AccessViolation
+        e.define_singleton_method(:__hyperstack_on_error) do |operation, params, fmted_message|
+          Hyperstack.on_error(operation, self, params, fmted_message)
+        end
         raise e
       end
     end
@@ -92,7 +99,7 @@ module ReactiveRecord
     class Destroy < Base
       param :acting_user, nils: true
       param :model
-      param :id
+      param :id, nils: true
       param :vector
       step do
         ReactiveRecord::Base.destroy_record(

data/lib/reactive_record/active_record/reactive_record/scoped_collection.rb

@@ -9,7 +9,10 @@ module ReactiveRecord
     def set_pre_sync_related_records(related_records, _record = nil)
       @pre_sync_related_records = nil
       ReactiveRecord::Base.catch_db_requests do
+        # puts "#{self}.set_pre_sync_related_records filter_records(#{related_records})"
+
         @pre_sync_related_records = filter_records(related_records)
+        # puts "returns #{@pre_sync_related_records}"
         live_scopes.each do |scope|
           scope.set_pre_sync_related_records(@pre_sync_related_records)
         end

data/lib/reactive_record/active_record/reactive_record/setters.rb

@@ -43,17 +43,26 @@ module ReactiveRecord
 
     def set_belongs_to(assoc, raw_value)
       set_common(assoc.attribute, raw_value) do |value, attr|
-        if assoc.inverse.collection?
-          update_has_many_through_associations assoc, value
-          update_inverse_collections assoc, value
-        else
-          update_inverse_attribute assoc, value
-        end
-        # itself will just reactively read the value (a model instance)  by doing a .id
-        update_belongs_to attr, value.itself
+        current_value = @attributes[assoc.attribute]
+        update_has_many_through_associations assoc, nil, current_value, :remove_member
+        update_has_many_through_associations assoc, nil, value, :add_member
+        remove_current_inverse_attribute     assoc, nil, current_value
+        add_new_inverse_attribute            assoc, nil, value
+        update_belongs_to                    attr,  value.itself
       end
     end
 
+    def set_belongs_to_via_has_many(orig, value)
+      assoc = orig.inverse
+      attr = assoc.attribute
+      current_value = @attributes[attr]
+      update_has_many_through_associations assoc, orig, current_value, :remove_member
+      update_has_many_through_associations assoc, orig, value, :add_member
+      remove_current_inverse_attribute     assoc, orig, current_value
+      add_new_inverse_attribute            assoc, orig, value
+      update_belongs_to                    attr,  value.itself
+    end
+
     def sync_has_many(attr)
       set_change_status_and_notify_only attr, @attributes[attr] != @synced_attributes[attr]
     end
@@ -85,30 +94,28 @@ module ReactiveRecord
     end
 
     def set_attribute_change_status_and_notify(attr, changed, new_value)
-      if @virgin
+      if @virgin || @being_destroyed
         @attributes[attr] = new_value
       else
         change_status_and_notify_helper(attr, changed) do |had_key, current_value|
           @attributes[attr] = new_value
           if !data_loading? ||
              (on_opal_client? && had_key && current_value.loaded? && current_value != new_value)
-            Hyperstack::Internal::Store::State.set_state(self, attr, new_value, data_loading?)
+            Hyperstack::Internal::State::Variable.set(self, attr, new_value, data_loading?)
           end
         end
       end
     end
 
     def set_change_status_and_notify_only(attr, changed)
-      return if @virgin
+      return if @virgin || @being_destroyed
       change_status_and_notify_helper(attr, changed) do
-        Hyperstack::Internal::Store::State.set_state(self, attr, nil) unless data_loading?
+        Hyperstack::Internal::State::Variable.set(self, attr, nil) unless data_loading?
       end
     end
 
     def change_status_and_notify_helper(attr, changed)
       empty_before = changed_attributes.empty?
-      # TODO: confirm this works:
-      # || data_loading? added so that model.new can be wrapped in a ReactiveRecord.load_data
       if !changed || data_loading?
         changed_attributes.delete(attr)
       elsif !changed_attributes.include?(attr)
@@ -117,7 +124,7 @@ module ReactiveRecord
       yield @attributes.key?(attr), @attributes[attr]
       return unless empty_before != changed_attributes.empty?
       if on_opal_client? && !data_loading?
-        Hyperstack::Internal::Store::State.set_state(self, '!CHANGED!', !changed_attributes.empty?, true)
+        Hyperstack::Internal::State::Variable.set(self, '!CHANGED!', !changed_attributes.empty?, true)
       end
       return unless aggregate_owner
       aggregate_owner.set_change_status_and_notify_only(
@@ -125,70 +132,100 @@ module ReactiveRecord
       )
     end
 
-    def update_inverse_attribute(association, value)
-      # when updating the inverse attribute of a belongs_to that is itself a belongs_to
-      # (i.e. 1-1 relationship) we clear the existing inverse value and then
-      # write the current record to the new value
-      current_value = @attributes[association.attribute]
-      inverse_attr = association.inverse.attribute
-      current_value.attributes[inverse_attr] = nil unless current_value.nil?
-      return if value.nil?
-      value.attributes[inverse_attr] = @ar_instance
-      return if data_loading?
-      Hyperstack::Internal::Store::State.set_state(value.backing_record, inverse_attr, @ar_instance)
-    end
-
-    def update_inverse_collections(association, value)
-      # when updating an inverse attribute of a belongs_to that is a has_many (i.e. a collection)
-      # we need to first remove the current associated value (if non-nil), then add the new
-      # value to the collection.  If the inverse collection is not yet initialized we do it here.
-      current_value = @attributes[association.attribute]
-      inverse_attr = association.inverse.attribute
-      if value.nil?
-        current_value.attributes[inverse_attr].delete(@ar_instance) unless current_value.nil?
+    # when updating the inverse attribute of a belongs_to that is itself a belongs_to
+    # (i.e. 1-1 relationship) we clear the existing inverse value and then
+    # write the current record to the new value
+
+    # when updating an inverse attribute of a belongs_to that is a has_many (i.e. a collection)
+    # we need to first remove the current associated value (if non-nil), then add the new
+    # value to the collection.  If the inverse collection is not yet initialized we do it here.
+
+    # the above is split into three methods, because the  inverse of apolymorphic belongs to may
+    # change from has_one to has_many.  So we first deal with the current value, then
+    # update the new value which uses the push_onto_collection helper
+
+    def remove_current_inverse_attribute(association, orig, model)
+      return if model.nil?
+      inverse_association = association.inverse(model)
+      return if inverse_association == orig
+      if inverse_association.collection?
+        # note we don't have to check if the collection exists, since it must
+        # exist as at this ar_instance is already part of it.
+        model.attributes[inverse_association.attribute].delete(@ar_instance)
       else
-        value.backing_record.push_onto_collection(@model, association.inverse, @ar_instance)
+        model.attributes[inverse_association.attribute] = nil
+      end
+    end
+
+    def add_new_inverse_attribute(association, orig, model)
+      return if model.nil?
+      inverse_association = association.inverse(model)
+      return if inverse_association == orig
+      if inverse_association.collection?
+        model.backing_record.push_onto_collection(@model, inverse_association, @ar_instance)
+      else
+        inverse_attr = inverse_association.attribute
+        model.attributes[inverse_attr] = @ar_instance
+        return if data_loading?
+        Hyperstack::Internal::State::Variable.set(model.backing_record, inverse_attr, @ar_instance)
       end
     end
 
     def push_onto_collection(model, association, ar_instance)
       @attributes[association.attribute] ||= Collection.new(model, @ar_instance, association)
-      @attributes[association.attribute] << ar_instance
+      @attributes[association.attribute]._internal_push ar_instance
+    end
+
+    # class Membership < ActiveRecord::Base
+    #   belongs_to :uzer
+    #   belongs_to :memerable, polymorphic: true
+    # end
+    #
+    # class Project < ActiveRecord::Base
+    #   has_many :memberships, as: :memerable, dependent: :destroy
+    #   has_many :uzers, through: :memberships
+    # end
+    #
+    # class Group < ActiveRecord::Base
+    #   has_many :memberships, as: :memerable, dependent: :destroy
+    #   has_many :uzers, through: :memberships
+    # end
+    #
+    # class Uzer < ActiveRecord::Base
+    #   has_many :memberships
+    #   has_many :groups,   through: :memberships, source: :memerable, source_type: 'Group'
+    #   has_many :projects, through: :memberships, source: :memerable, source_type: 'Project'
+    # end
+
+    # membership.uzer = some_new_uzer (i.e. through association is changing)
+    # means membership.some_new_uzer.(groups OR projects) << uzer.memberable (depending on type of memberable)
+    # and we have to remove the current value of the source association (memerable) from the current uzer group or project
+    # and we have to then find any inverse has_many_through association (i.e. group or projects.uzers) and delete the
+    # current value from those collections and push the new value on
+
+    def update_has_many_through_associations(assoc, orig, value, method)
+      return if value.nil?
+      assoc.through_associations(value).each do |ta|
+        next if orig == ta
+        source_value = @attributes[ta.source]
+        # skip if source value is nil or if type of the association does not match type of source
+        next unless source_value.class.to_s == ta.source_type
+        ta.send method, source_value, value
+        ta.source_associations(source_value).each do |sa|
+          sa.send method, value, source_value
+        end
+      end
     end
 
-    def update_has_many_through_associations(association, value)
-      association.through_associations.each { |ta| update_through_association(ta, value) }
-      association.source_associations.each { |sa| update_source_association(sa, value) }
-    end
+    # def remove_src_assoc(sa, source_value, current_value)
+    #   source_inverse_collection = source_value.attributes[sa.attribute]
+    #   source_inverse_collection.delete(current_value) if source_inverse_collection
+    # end
+    #
+    # def add_src_assoc(sa, source_value, new_value)
+    #   source_value.attributes[sa.attribute] ||= Collection.new(sa.owner_class, source_value, sa)
+    #   source_value.attributes[sa.attribute] << new_value
+    # end
 
-    def update_through_association(ta, new_belongs_to_value)
-      # appointment.doctor = doctor_new_value (i.e. through association is changing)
-      # means appointment.doctor_new_value.patients << appointment.patient
-      # and we have to appointment.doctor_current_value.patients.delete(appointment.patient)
-      source_value = @attributes[ta.source]
-      current_belongs_to_value = @attributes[ta.inverse.attribute]
-      return unless source_value
-      unless current_belongs_to_value.nil? || current_belongs_to_value.attributes[ta.attribute].nil?
-        current_belongs_to_value.attributes[ta.attribute].delete(source_value)
-      end
-      return unless new_belongs_to_value
-      new_belongs_to_value.attributes[ta.attribute] ||= Collection.new(ta.klass, new_belongs_to_value, ta)
-      new_belongs_to_value.attributes[ta.attribute] << source_value
-    end
-
-    def update_source_association(sa, new_source_value)
-      # appointment.patient = patient_value (i.e. source is changing)
-      # means appointment.doctor.patients.delete(appointment.patient)
-      # means appointment.doctor.patients << patient_value
-      belongs_to_value = @attributes[sa.inverse.attribute]
-      current_source_value = @attributes[sa.source]
-      return unless belongs_to_value
-      unless belongs_to_value.attributes[sa.attribute].nil? || current_source_value.nil?
-        belongs_to_value.attributes[sa.attribute].delete(current_source_value)
-      end
-      return unless new_source_value
-      belongs_to_value.attributes[sa.attribute] ||= Collection.new(sa.klass, belongs_to_value, sa)
-      belongs_to_value.attributes[sa.attribute] << new_source_value
-    end
   end
 end

data/lib/reactive_record/active_record/reactive_record/while_loading.rb

@@ -74,6 +74,191 @@ module ReactiveRecord
   # 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 WhileLoading
+  #
+  #     include Hyperstack::Component::IsomorphicHelpers
+  #
+  #     before_first_mount do
+  #       @css_to_preload = ""
+  #       @while_loading_counter = 0
+  #     end
+  #
+  #     def self.get_next_while_loading_counter
+  #       @while_loading_counter += 1
+  #     end
+  #
+  #     def self.preload_css(css)
+  #       @css_to_preload += "#{css}\n"
+  #     end
+  #
+  #     def self.has_observers?
+  #       Hyperstack::Internal::State::Variable.observed?(self, :loaded_at)
+  #     end
+  #
+  #     class << self
+  #       alias :observed? :has_observers?
+  #     end
+  #
+  #     prerender_footer do
+  #       "<style>\n#{@css_to_preload}\n</style>".tap { @css_to_preload = ""}
+  #     end
+  #
+  #     if RUBY_ENGINE == 'opal'
+  #
+  #       # +: I DONT THINK WE USE opal-jquery in this module anymore - require 'opal-jquery' if opal_client?
+  #       # -: You think wrong. add_style_sheet uses the jQuery $, after_mount too, others too
+  #       # -: I removed those references. Now you think right.
+  #
+  #       include Hyperstack::Component
+  #
+  #       param :render_original_child
+  #       param :loading
+  #
+  #       class << self
+  #
+  #         def loading?
+  #           @is_loading
+  #         end
+  #
+  #         def loading!
+  #           Hyperstack::Internal::Component::RenderingContext.waiting_on_resources = true
+  #           Hyperstack::Internal::State::Variable.get(self, :loaded_at)
+  #           # this was moved to where the fetch is actually pushed on to the fetch array in isomorphic base
+  #           # Hyperstack::Internal::State::Variable.set(self, :quiet, false)
+  #           @is_loading = true
+  #         end
+  #
+  #         def loaded_at(loaded_at)
+  #           Hyperstack::Internal::State::Variable.set(self, :loaded_at, loaded_at)
+  #           @is_loading = false
+  #         end
+  #
+  #         def quiet?
+  #           Hyperstack::Internal::State::Variable.get(self, :quiet)
+  #         end
+  #
+  #         def page_loaded?
+  #           Hyperstack::Internal::State::Variable.get(self, :page_loaded)
+  #         end
+  #
+  #         def quiet!
+  #           Hyperstack::Internal::State::Variable.set(self, :quiet, true)
+  #           after(1) { Hyperstack::Internal::State::Variable.set(self, :page_loaded, true) } unless on_opal_server? or @page_loaded
+  #           @page_loaded = true
+  #         end
+  #
+  #         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 !important; }\n" +
+  #                                    ".reactive_record_is_loaded > .reactive_record_show_while_loading { display: none !important; }";
+  #               document.head.append(style_el);
+  #             }
+  #             @style_sheet_added = true
+  #           end
+  #         end
+  #
+  #       end
+  #
+  #       def after_mount_and_update
+  #         @waiting_on_resources = @Loading
+  #         node = dom_node
+  #         %x{
+  #           Array.from(node.children).forEach(
+  #             function(current_node, current_index, list_obj) {
+  #               if (current_index > 0 && current_node.className.indexOf('reactive_record_show_when_loaded') === -1) {
+  #                 current_node.className = current_node.className + ' reactive_record_show_when_loaded';
+  #               } else if (current_index == 0 && current_node.className.indexOf('reactive_record_show_while_loading') === -1) {
+  #                 current_node.className = current_node.className + ' reactive_record_show_while_loading';
+  #               }
+  #             }
+  #           );
+  #         }
+  #         nil
+  #       end
+  #
+  #       before_mount do
+  #         @uniq_id = WhileLoading.get_next_while_loading_counter
+  #         WhileLoading.preload_css(
+  #           ":not(.reactive_record_is_loading).reactive_record_while_loading_container_#{@uniq_id} > :nth-child(1) {\n"+
+  #           "  display: none;\n"+
+  #           "}\n"
+  #         )
+  #       end
+  #
+  #       after_mount do
+  #         WhileLoading.add_style_sheet
+  #         after_mount_and_update
+  #       end
+  #
+  #       after_update :after_mount_and_update
+  #
+  #       render do
+  #         @RenderOriginalChild.call(@uniq_id)
+  #       end
+  #
+  #     end
+  #
+  #   end
+  #
+  # end
+  #
+  # module Hyperstack
+  #   module Component
+  #
+  #     class Element
+  #
+  #       def while_loading(display = "", &loading_display_block)
+  #         original_block = block || -> () {}
+  #
+  #         if display.respond_to? :as_node
+  #           display = display.as_node
+  #           block = lambda { display.render; instance_eval(&original_block) }
+  #         elsif !loading_display_block
+  #           block = lambda { display; instance_eval(&original_block) }
+  #         else
+  #           block = ->() { instance_eval(&loading_display_block); instance_eval(&original_block) }
+  #         end
+  #          loading_child = Internal::Component::RenderingContext.build do |buffer|
+  #            Hyperstack::Internal::Component::RenderingContext.render(:span, key: 1, &loading_display_block) #{ to_s }
+  #            buffer.dup
+  #          end
+  #         children = `#{@native}.props.children.slice(0)`
+  #         children.unshift(loading_child[0].instance_eval { @native })
+  #         @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n}, #{children})`
+  #        render_original_child = lambda do |uniq_id|
+  #          classes = [
+  #            @properties[:class], @properties[:className],
+  #            "reactive_record_while_loading_container_#{uniq_id}"
+  #          ].compact.join(' ')
+  #          @properties.merge!({
+  #            "data-reactive_record_while_loading_container_id" => uniq_id,
+  #            "data-reactive_record_enclosing_while_loading_container_id" => uniq_id,
+  #            className: classes
+  #          })
+  #          @native = `React.cloneElement(#{@native}, #{@properties.shallow_to_n})`
+  #          render
+  #        end
+  #        delete
+  #        ReactAPI.create_element(
+  #           ReactiveRecord::WhileLoading,
+  #           loading: waiting_on_resources,
+  #           render_original_child: render_original_child)
+  #       end
+  #
+  #       def hide_while_loading
+  #         while_loading
+  #       end
+  #
+  #     end
+  #   end
+  # end
+  #
+
+
   class WhileLoading
 
     include Hyperstack::Component::IsomorphicHelpers
@@ -92,7 +277,7 @@ module ReactiveRecord
     end
 
     def self.has_observers?
-      Hyperstack::Internal::Store::State.observed?(self, :loaded_at)
+      Hyperstack::Internal::State::Variable.observed?(self, :loaded_at)
     end
 
     class << self
@@ -116,6 +301,7 @@ module ReactiveRecord
       param :loading_children
       param :element_type
       param :element_props
+      others :other_props
       param :display, default: ''
 
       class << self
@@ -126,28 +312,28 @@ module ReactiveRecord
 
         def loading!
           Hyperstack::Internal::Component::RenderingContext.waiting_on_resources = true
-          Hyperstack::Internal::Store::State.get_state(self, :loaded_at)
+          Hyperstack::Internal::State::Variable.get(self, :loaded_at)
           # this was moved to where the fetch is actually pushed on to the fetch array in isomorphic base
-          # Hyperstack::Internal::Store::State.set_state(self, :quiet, false)
+          # Hyperstack::Internal::State::Variable.set(self, :quiet, false)
           @is_loading = true
         end
 
         def loaded_at(loaded_at)
-          Hyperstack::Internal::Store::State.set_state(self, :loaded_at, loaded_at)
+          Hyperstack::Internal::State::Variable.set(self, :loaded_at, loaded_at)
           @is_loading = false
         end
 
         def quiet?
-          Hyperstack::Internal::Store::State.get_state(self, :quiet)
+          Hyperstack::Internal::State::Variable.get(self, :quiet)
         end
 
         def page_loaded?
-          Hyperstack::Internal::Store::State.get_state(self, :page_loaded)
+          Hyperstack::Internal::State::Variable.get(self, :page_loaded)
         end
 
         def quiet!
-          Hyperstack::Internal::Store::State.set_state(self, :quiet, true)
-          after(1) { Hyperstack::Internal::Store::State.set_state(self, :page_loaded, true) } unless on_opal_server? or @page_loaded
+          Hyperstack::Internal::State::Variable.set(self, :quiet, true)
+          after(1) { Hyperstack::Internal::State::Variable.set(self, :page_loaded, true) } unless on_opal_server? or @page_loaded
           @page_loaded = true
         end
 
@@ -157,8 +343,8 @@ module ReactiveRecord
             %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; }";
+              style_el.innerHTML = ".reactive_record_is_loading > .reactive_record_show_when_loaded { display: none !important; }\n" +
+                                   ".reactive_record_is_loaded > .reactive_record_show_while_loading { display: none !important; }";
               document.head.append(style_el);
             }
             @style_sheet_added = true
@@ -167,53 +353,57 @@ module ReactiveRecord
 
       end
 
-      before_mount do
-        @uniq_id = WhileLoading.get_next_while_loading_counter
-        WhileLoading.preload_css(
-          ".reactive_record_while_loading_container_#{@uniq_id} > :nth-child(1n+#{@LoadedChildren.count+1}) {\n"+
-          "  display: none;\n"+
-          "}\n"
-        )
-      end
-
-      after_mount do
+      def after_mount_and_update(*)
         @waiting_on_resources = @Loading
-        WhileLoading.add_style_sheet
         node = dom_node
         %x{
-          var nodes = node.querySelectorAll(':nth-child(-1n+'+#{@LoadedChildren.count}+')');
-          nodes.forEach(
+          Array.from(node.children).forEach(
             function(current_node, current_index, list_obj) {
-              if (current_node.className.indexOf('reactive_record_show_when_loaded') === -1) {
+              if (current_index > 0 && current_node.className.indexOf('reactive_record_show_when_loaded') === -1) {
                 current_node.className = current_node.className + ' reactive_record_show_when_loaded';
-              }
-            }
-          );
-          nodes = node.querySelectorAll(':nth-child(1n+'+#{@LoadedChildren.count+1}+')');
-          nodes.forEach(
-            function(current_node, current_index, list_obj) {
-              if (current_node.className.indexOf('reactive_record_show_while_loading') === -1) {
+              } else if (current_index == 0 && current_node.className.indexOf('reactive_record_show_while_loading') === -1) {
                 current_node.className = current_node.className + ' reactive_record_show_while_loading';
               }
             }
           );
         }
+        nil
       end
 
-      after_update do
-        @waiting_on_resources = @Loading
+      before_mount do
+        @uniq_id = WhileLoading.get_next_while_loading_counter
+        WhileLoading.preload_css(
+          ":not(.reactive_record_is_loading).reactive_record_while_loading_container_#{@uniq_id} > :nth-child(1) {\n"+
+          "  display: none;\n"+
+          "}\n"
+        )
+      end
+
+      after_mount do
+        WhileLoading.add_style_sheet
+        after_mount_and_update
       end
 
-      def render
+      after_update :after_mount_and_update
+
+      render do
+        # return ReactAPI.create_element(@ElementType[0], @ElementProps.dup) do
+        #   @LoadedChildren
+        # end
         props = @ElementProps.dup
-        classes = [props[:class], props[:className], "reactive_record_while_loading_container_#{@uniq_id}"].compact.join(" ")
+        classes = [
+          props[:class], props[:className],
+          @OtherProps.delete(:class), @OtherProps.delete(: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
         })
+        props.merge!(@OtherProps)
         ReactAPI.create_element(@ElementType[0], props) do
-          @LoadedChildren + @LoadingChildren
+          @LoadingChildren + @LoadedChildren
         end.tap { |e| e.waiting_on_resources = @Loading }
       end
 
@@ -231,6 +421,10 @@ module Hyperstack
       def while_loading(display = "", &loading_display_block)
         loaded_children = []
         loaded_children = block.call.dup if block
+        if loaded_children.last.is_a? String
+          loaded_children <<
+            Hyperstack::Internal::Component::ReactWrapper.create_element(:span) { loaded_children.pop }
+        end
         if display.respond_to? :as_node
           display = display.as_node
           loading_display_block = lambda { display.render }
@@ -238,12 +432,10 @@ module Hyperstack
           loading_display_block = lambda { display }
         end
         loading_children = Internal::Component::RenderingContext.build do |buffer|
-          result = loading_display_block.call
-          result = result.to_s if result.try :acts_as_string?
-          result.span.tap { |e| e.waiting_on_resources = Internal::Component::RenderingContext.waiting_on_resources } if result.is_a? String
+          Hyperstack::Internal::Component::RenderingContext.render(:span, &loading_display_block) #{ to_s }
           buffer.dup
         end
-
+       as_node
        new_element = ReactAPI.create_element(
           ReactiveRecord::WhileLoading,
           loading: waiting_on_resources,
@@ -252,7 +444,7 @@ module Hyperstack
           element_type: [type],
           element_props: properties)
 
-        Internal::Component::RenderingContext.replace(self, new_element)
+        #Internal::Component::RenderingContext.replace(self, new_element)
       end
 
       def hide_while_loading
@@ -267,6 +459,10 @@ if RUBY_ENGINE == 'opal'
   module Hyperstack
     module Component
 
+      def quiet?
+        Hyperstack::Internal::State::Variable.get(ReactiveRecord::WhileLoading, :quiet)
+      end
+
       alias_method :original_component_did_mount, :component_did_mount
 
       def component_did_mount(*args)
@@ -282,6 +478,27 @@ if RUBY_ENGINE == 'opal'
         reactive_record_link_set_while_loading_container_class
       end
 
+      # This is required to support legacy browsers (Internet Explorer 9+)
+      # https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+      `
+      if (typeof(Element) != 'undefined' && !Element.prototype.matches) {
+        Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                    Element.prototype.webkitMatchesSelector;
+      }
+
+      if (typeof(Element) != 'undefined' && !Element.prototype.closest) {
+        Element.prototype.closest = function(s) {
+          var el = this;
+
+          do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+          } while (el !== null && el.nodeType === 1);
+          return null;
+        };
+      }
+      `
+
       def reactive_record_link_to_enclosing_while_loading_container
         # Call after any component mounts - attaches the containers loading id to this component
         # Fyi, the while_loading container is responsible for setting its own link to itself