How to handle loading state with Reactive Record lazy loading

Question

I am hoping that someone can point me to the best way to handle loading state in a top level Reactrb component with is lazy loading data through Reactive Record.

My gaol is for the top level component to display a wait state while its children components get the data they need to render and then render the whole component quickly. I don't want individual wait states with child components as this creates a 'jerky' experience when there is a lot of data to load.

If you consider this example:

class PostsWithCommentsList < React::Component::Base

  before_mount do
    state.posts! Post.all
  end

  def everything_loaded?
      #how do I know when all posts and all comments are loaded?
  end

  def render
     div do
        ul do
          state.posts.each do |post|
            li { post.title }
            ul do
              post.comments.each do |comment|
                li { comment.body }
              end
           end
         end
      end if everything_loaded?
    end
  end
end

How do I get the everything_loaded? method to check that all th Posts and all the Comments have been loaded so the component draws quickly and smoothly?

All help very welcome. Thank you

score 1 · Accepted Answer · edited Aug 15 '16 at 16:53

There is a feature of ReactiveRecord that isn't finished, but is at a point where it can be useful. It's called WhileLoading, and the goal was to be able to say something like:

def render
  div do
    ul do
      state.posts.each do |post|
        li { post.title }
        ul do
          post.comments.each do |comment|
            li { comment.body }
          end
        end
      end
    end.while_loading do
      # Some kind of loading screen
    end
  end
end

Basically you would call that method on the end of the element you want to have have something shown while it is loading, and then pass in what you want shown. Under the hood this would just show/hide the element instead of not rendering.

Unfortunately, this isn't fully working yet, but here's how it can be used.

after_mount do
  @initial_data_loaded = false
  Element['.content-loading'].hide
  Element['.loading-div'].show
end

def toggle_loading
  return if @initial_data_loaded
  if ReactiveRecord::WhileLoading.quiet?
    Element['.content-loading'].show
    Element['.loading-div'].hide
    @initial_data_loaded = true
  end
end

def render
  div do
    div.content_loading do
      ul do
        state.posts.each do |post|
          li { post.title }
          ul do
            post.comments.each do |comment|
              li { comment.body }
            end
          end
        end
      end
    end
    div.loading_div(style: { display: 'none' }) do
      # Your loading screen
    end
  end.tap { toggle_loading }
end

It's a little dirty, but that should accomplish what you need for now, until we get WhileLoading working well. Basically the content needs to be rendered for ReactiveRecord to know to fetch and apply that data, so we need to do a show/hide instead of preventing it from rendering until the data is there.

I have tried this approach but am getting a lot of React warnings "Warning: undefined(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`." — BarrieH, Aug 15 '16 at 16:06
Debugging this, I can see that its the call to ReactiveRecord::WhileLoading.quiet? that generates all the warnings. Perhaps this was designed for an earlier version of React? — BarrieH, Aug 15 '16 at 16:08
I forgot about that yeah, you'll have to use the 0-8-stable branch of reactrb to get this working with react.js > 0.13. I'm not sure when @catmando will be releasing a new version with the update. — adamcreekroad, Aug 16 '16 at 14:43

How to handle loading state with Reactive Record lazy loading

1 Answers1