Reactive Record 지연로드를 사용하여로드 상태를 처리하는 방법

Question

Reactive Record를 통해 데이터를로드하는 것이 지연되는 최상위 Reactrb 구성 요소에서로드 상태를 처리하는 가장 좋은 방법을 누군가에게 알려줄 수 있기를 희망합니다.

My Gaol은 최상위 구성 요소가 대기 상태를 표시하고 자식 구성 요소가 렌더링하는 데 필요한 데이터를 가져온 다음 전체 구성 요소를 빠르게 렌더링합니다. 로드 할 데이터가 많을 때 자식 구성 요소가있는 개별 대기 상태가 좋지 않은 경험을하기 때문에이를 원하지 않습니다. 나는 everything_loaded을 얻는 방법

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 

:이 예제를 고려하는 경우

? 메소드를 사용하여 모든 게시물과 모든 주석이로드되어 구성 요소가 빠르고 부드럽게 그려 지는지 확인하십시오.

매우 환영합니다. 고마워요

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가 해당 데이터를 가져와 적용한다는 것을 알기 위해 내용을 렌더링해야하므로 데이터가있을 때까지 렌더링을 방지하는 대신 표시/숨기기를 수행해야합니다.