Card 컴포넌트 내부 loading state의 사용이 적용되는 특정 상황이 궁금합니다. about stackflow HOT 6 CLOSED

isRoot는 가장 첫번째 스크린인 상황인데요. 가장 첫번째 스크린인 상황에서, <ScreenHelmet />을 사용한 경우 렌더링 타이밍 이슈로 인해서, 상단바가 없는 화면이 먼저 보여지고, 이후에 상단바가 생기는 현상이 발생해요.

• 원하는 Behavior: 한번에 상단바가 띄워진 첫 화면이 보여진다.
• 이슈: 상단바가 없는 화면이 슬쩍 보인뒤에 5~10ms 후 상단바가 등장한다.

따라서 해당 이슈를 해결하기 위해 setTimeout(cb, 0)을 사용했습니다.

다만 저도 해당 이슈에 대해서 setTimeout(cb, 0)은 좋은 해결 방법은 아니라고 생각이 되서, 혹시 더 나은 방법을 제안해주시거나 PR을 주시면 반영해보겠습니다!

from stackflow.

loading 상태는 핵심 애니메이션 과정에 포함되지 않아서 저는 좋은 방향인거 같습니다 ㅎㅎ visiblity: hidden; 인 경우에는 말씀해주신 keen-slider가 잘 작동하는 것 확인하신걸까요?

넵! playground에서 수정 후 테스트 해보았습니다. karrotframe 레포지토리가 yarn monorepo로 이루어진것 맞죠? monorepo는 처음이라 실행하는데 약간 익숙치 않았네요. ㅎㅎ

괜찮으시다면 해당 이슈 관련 css 내용으로 PR 날려도 될까요?

from stackflow.

isRoot는 가장 첫번째 스크린인 상황인데요. 가장 첫번째 스크린인 상황에서, <ScreenHelmet />을 사용한 경우 렌더링 타이밍 이슈로 인해서, 상단바가 없는 화면이 먼저 보여지고, 이후에 상단바가 생기는 현상이 발생해요.

• 원하는 Behavior: 한번에 상단바가 띄워진 첫 화면이 보여진다.
• 이슈: 상단바가 없는 화면이 슬쩍 보인뒤에 5~10ms 후 상단바가 등장한다.

따라서 해당 이슈를 해결하기 위해 setTimeout(cb, 0)을 사용했습니다.

다만 저도 해당 이슈에 대해서 setTimeout(cb, 0)은 좋은 해결 방법은 아니라고 생각이 되서, 혹시 더 나은 방법을 제안해주시거나 PR을 주시면 반영해보겠습니다!

많이 고민해 보았는데 막상 다른 해결책이 떠오르질 않네요. 😓

사실 이 부분의 코드가 어떻게 동작하는지 궁금했던 이유가 사실 따로 있는데요! karrotframe과 keen-slider 라이브러리를 사용하게 될 경우 이슈가 있어 어디가 원인인지 알아보다가 여기까지 오게 되었네요.

제가 파악한 원인은 다음과 같습니다.

1. keen-slider는 내부적으로 첫 렌더링 시 슬라이더로 사용될 element의 offsetWidth 또는 offsetHeight 값을 구해서 다양한 애니메이션 효과를 적용한다.
2. karrotframe은 내부적으로 <ScreenHelmet /> 렌더링 타이밍 이슈를 해결하기 위해 잠깐 동안 display: none; 이 적용되어 children의 offsetWidth, offsetHeight 값이 모두 0으로 바뀐다.
3. 1번, 2번 상황이 겹쳐 keen-slider가 제대로 동작하지 않는다.
4. karrotframe Card.scss#38 스타일 코드를 visibility: hidden;으로 수정하면 element의 크기는 유지하되 <ScreenHelmet />의 렌더링 타이밍 이슈또한 display: none과 동일하게 해결할 수 있다.

제가 정리해본 내용은 위와 같은데, 사실 두 라이브러리의 이슈를 karrotframe에서 해결해야할지 keen-slider에서 해결해야할 지 확신하진 못 하지만 일단은 karrotframe style 코드를 수정해 해결할 수 있다는 경험을 공유하기위해 코멘트 남깁니다.

+) 추후 다른 offsetWidth, offsetHeight를 요구하는 라이브러리와 같이 사용하게 된다면 똑같은 이슈를 겪을 것 같아 visiblity: hidden;으로 수정하는 것이 저는 좋을 것 같다고 생각이 되었는데요, 이에 대해 어떻게 생각하시는지 궁금합니다!

from stackflow.

loading 상태는 핵심 애니메이션 과정에 포함되지 않아서 저는 좋은 방향인거 같습니다 ㅎㅎ visiblity: hidden; 인 경우에는 말씀해주신 keen-slider가 잘 작동하는 것 확인하신걸까요?

from stackflow.

네네 ㅎㅎ

https://github.com/daangn/karrotframe/blob/master/CONTRIBUTING.md

여기 문서 참조하시면 돼요!

from stackflow.

0.14.9에 해결되었어요

from stackflow.