[Task-9] As a user, I can see lazy loading page while waiting for survey

[gutakk]

#10

What happened 👀

• Add lazy loader component follow the Figma design
• Using react-loading-skeleton for the animation
• Add lazy loader to home page
• Add unit test

Insight 📝

N/A

Proof Of Work 📹

• Lazy loader (desktop)
  

• Lazy loader (mobile)
  

[rafayet-monon]

This margin should be 32px

[gutakk]

I think it should be 38px according to the image

[rafayet-monon]

I agree. It should be 38px. But with the current margin and also there is some line height is making the distance much larger. Below two images are the current distance differences -

• Difference between &__survey-title and &__survey-image
  
• Difference between &__button and &__survey-image
  

You can use chrome extension - MeasureMate to easily measure these distances. It's really helpful.

I also think difference between &__survey-title and &__survey-subtitle is a bit larger. I cannot say for certain because the differences are not shown in figma.

The below style changes should fix the issue. You will get nice 38px distance as well as the 32px.

&__footer {
  margin-top: rem(32px);
  line-height: 0;
}

&__survey-subtitle .react-loading-skeleton {
  margin-top: rem(8px);
}

[gutakk]

Thanks for the suggestion. Fixed in de50d2f