fix(react): add defineSuspense util function

[ssi02014]

close: #1058

Overview

Add the defineSuspense utility function discussed in the issue article above, and write the test code.

The reason we defined SuspenseClientOnly within defineSuspense is because we are getting the "dependency cycle detected" issue.

If you have any additional thoughts on the above issues, please let us know!

PR Checklist

• [x] I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2195a58b832f725276b65a50c5e8174550135cd6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

| Name | Type | | ------------------------- | ----- | | @suspensive/react | Patch | | @suspensive/react-query-4 | Patch | | @suspensive/react-query-5 | Patch | | @suspensive/react-query | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 1:29pm

[vercel[bot]]

@ssi02014 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #1065 will create unknown performance changes

_{Comparing ssi02014:feat/defineSuspense (2195a58) with main (df5cedb)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.23%. Comparing base (df5cedb) to head (2195a58).

Additional details and impacted files

[](https://app.codecov.io/gh/toss/suspensive/pull/1065?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #1065 +/- ## ========================================== + Coverage 84.18% 84.23% +0.05% ========================================== Files 51 52 +1 Lines 550 552 +2 Branches 117 117 ========================================== + Hits 463 465 +2 Misses 82 82 Partials 5 5 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `97.05% <100.00%> (+0.02%)` | :arrow_up: | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `75.28% <ø> (ø)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/jotai](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/promise](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-await](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/1065/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `80.39% <ø> (ø)` | |

[ssi02014]

@manudeli Thank you for improving this task👍 I've checked it out.