如何使用 Reactive Record 延迟加载处理加载状态

Question

我希望有人能告诉我在顶级 Reactrb 组件中处理加载状态的最佳方法，它是通过 Reactive Record 延迟加载数据。

我的目标是顶级组件显示等待状态，而其子组件获取它们需要渲染的数据，然后快速渲染整个组件。我不希望带有子组件的单独等待状态，因为这会在有大量数据要加载时创建 'jerky' 体验。

如果你考虑这个例子：

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

如何获得 everything_loaded？检查所有帖子和所有评论是否已加载以便组件快速流畅地绘制的方法？

非常欢迎大家的帮助。谢谢

Answer 1

ReactiveRecord 的一项功能尚未完成，但已到了可以派上用场的地步。它称为 WhileLoading，目标是能够说出如下内容：

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

基本上，您会在要在加载时显示内容的元素末尾调用该方法，然后传入您想要显示的内容。在引擎盖下，这只会 show/hide 元素而不是不渲染。

不幸的是，这还没有完全发挥作用，但这是它的使用方法。

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

它有点脏，但在我们让 WhileLoading 正常工作之前，这应该可以满足您现在的需求。基本上，内容需要被渲染以便 ReactiveRecord 知道获取和应用该数据，所以我们需要做一个 show/hide 而不是在数据存在之前阻止它渲染。

如何使用 Reactive Record 延迟加载处理加载状态

How to handle loading state with Reactive Record lazy loading

react.rb