如何使用反應記錄延遲加載來處理加載狀態

Question

我希望有人可以指示我通過Reactive Record緩存加載數據來處理頂級Reactrb組件中加載狀態的最佳方式。

我的gaol是頂層組件顯示一個等待狀態，而其子組件獲取他們需要呈現的數據，然後快速渲染整個組件。我不希望帶有子組件的個別等待狀態，因爲這會在需要加載大量數據時產生「急躁」的體驗。

如果你考慮這個例子：

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 

基本上你會調用這個方法你想擁有的元素的結束有它加載時顯示的東西，然後通過在你想要顯示的內容中。在引擎蓋下，這隻會顯示/隱藏元素，而不是渲染。

不幸的是，這還沒有完全工作，但這裏是如何使用它。

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需要渲染內容才能獲取並應用這些數據，因此我們需要進行顯示/隱藏，而不是阻止渲染，直到數據存在。