DEVOCEAN

onMounted(() => {
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntriesByName("first-contentful-paint")) {
      console.log("FCP candidate:", entry.startTime, entry);
    }
  }).observe({ type: "paint", buffered: true });
});

// 로딩 스피너 적용 시
// FCP candidate: 699.6000000238419
{
  name: 'first-contentful-paint',
  entryType: 'paint',
  startTime: 699.6000000238419, // 400 ~ 900ms 사이의 값
  duration: 0
}

// 스켈레톤 적용 시
// FCP candidate: 204.69999998807907
{
  name: 'first-contentful-paint',
  entryType: 'paint',
  startTime: 204.69999998807907, // 200ms ~ 260ms 사이의 값
  duration: 0
}

// CoinDetailSkeleton.vue

<div class="skeleton__coin-detail">
  <div class="skeleton__name-wrapper">
    <div class="skeleton__name"></div>
    <div class="skeleton__chain"></div>
  </div>
  <div class="skeleton__amount"></div>
  <!-- ... -->
</div>

.skeleton__coin-list {
  animation: skeleton infinite;
}

.skeleton__name-wrapper {
  display: flex;
  margin-bottom: 0.8rem;
}

.skeleton__name {
  height: 8rem;
  width: 20rem;
}

.skeleton__chain {
  height: 8rem;
  width: 12rem;
}

.skeleton__amount {
  width: 34rem;
  height: 12rem;
}

/* ... 스켈레톤 스타일 코드 */

// CoinDetailSkeleton.vue

<div>
  <Skeleton width="200" height="80" />
  <Spacing size="8" />
  <Row>
    <Skeleton width="340" height="120" />
    <Spacing size="8" direction="row" />
    <Skeleton width="120" height="80" />
  </Row>
</div>

<!-- React -->
<div>
  { service?.name ?
  <p>{service?.name}</p>
  :
  <p>로딩 중...</p>
  }
</div>

<!-- Vue -->
<div>
  <p v-if="service?.name">{{ service?.name }}</p>
  <p v-else>로딩 중...</p>
</div>

<div>
  <Transition name="fade">
    <TransferListSkeleton v-if="transferQuery.isLoading" />
    <TransferList v-else :data="transferQuery.data" />
  </Transition>
</div>

/* [사용자 지정 애니메이션]-[enter|leave]-[active|from|to] 의 형식에 맞게 애니메이션을 정의합니다. */
/* 전이되는 클래스명에 대한 설명은 아래 공식 문서 링크를 참고해 주세요. */
/* https://vuejs.org/guide/built-ins/transition#css-based-transitions */

.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

<div>
  <Transition name="fade" mode="out-in">
    <!-- mode="out-in" 이 설정되면 스켈레톤이 DOM에서 제거된 후 <TransferList> 가 렌더링되는 것이 보장된다. -->
    <TransferListSkeleton v-if="transferQuery.isLoading" />
    <TransferList v-else :data="transferQuery.data" />
  </Transition>
</div>

onMounted(() => {
  handleFetchCoinList();
});

const handleFetchCoinList = async () => {
  await useCoinDetail().load({ ...params });
  // Do something...
};

// AS-IS
onMounted(() => {
  if (!coinStore.$state.coinList.length) {
    handleFetchCoinList();
  }
});

const handleFetchCoinList = async () => {
  const { isLoading, coinList } = await useCoinDetail().load({ ...params });
  isLoading.value = isLoading;
  coinStore.setCoinList(coinList);
};

// TO-BE
import { keepPreviousData } from "@tanstack/vue-query";

const { isLoading, data: coinList } = useQuery({
  queryKey: [WALLET_COIN_LIST_API],
  queryFn: () => useCoinDetail().load({ ...params }),
  // 페이지 이동 과정에서 데이터가 갱신되어도, 데이터가 심리스하게 교체됩니다.
  placeholderData: keepPreviousData,
});

const { error: queryAError } = useQuery();
const { error: queryBError } = useQuery();
const { error: queryCError } = useQuery();

watch(
  () => [queryAError, queryBError, queryCError],
  () => {
    // 에러 핸들링 로직이 너무 길어진다... 😭
  }
);