PCH Related Posts: Prevent Related Posts indefinite loading

[vaurdan]

Description

This PR enhances the usePostData hook in the Related Posts feature by utilizing hasFinishedResolution and isResolving to ensure it returns data only when it's fully resolved. This update is particularly useful in scenarios where the users REST API endpoint is disabled, preventing the PCH from retrieving a list of users.

Testing indicates that the new approach ensures the hook accurately determines when the data is ready to be rendered, preventing the component from remaining indefinitely in a Loading state. The component will now attempt to render with the available data as soon as all fetching operations are resolved.

Motivation and context

Improve the reliability of the Related Posts feature, ensuring it functions correctly even in edge cases or when unexpected API data is returned. By checking if the data has been resolved, the feature can gracefully handle scenarios where certain data endpoints, such as the users REST API, are disabled or slow to respond. This prevents the application from hanging indefinitely and enhances the user experience by rendering available data promptly.

How has this been tested?

Tested locally.

Summary by CodeRabbit

• New Features
  • Introduced a timeout mechanism in the post data fetching process, allowing for improved handling of delays. Users can now specify a timeout duration for fetching related post data, enhancing overall performance and responsiveness.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Base branches to auto review (4)

* develop * add/.* * fix/.* * update/.*

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

## Walkthrough The recent updates to the `usePostData` function enhance its robustness by introducing a timeout mechanism for fetching post data. With the addition of a `timeoutDurationMs` parameter, the function can now manage data retrieval more effectively, ensuring that it returns post details even if the fetching process is delayed. This improves user experience by allowing the application to handle slow network responses gracefully. ## Changes | Files | Change Summary | |-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------| | `src/content-helper/editor-sidebar/related-posts/hooks.ts` | Modified `usePostData` to include a `timeoutDurationMs` parameter for managing fetch timeouts. Added state variables `isTimeout` and `postData` to track fetching status and results. Introduced two `useEffect` hooks for managing data readiness and timeout conditions. | ## Sequence Diagram(s) ```mermaid sequenceDiagram participant User participant Component participant usePostData participant DataStore User->>Component: Request post data Component->>usePostData: Call usePostData(timeoutDurationMs) usePostData->>DataStore: Fetch post data (authors, categories, tags) alt Data fetched before timeout DataStore-->>usePostData: Return post data usePostData-->>Component: Provide post data else Timeout reached Note right of usePostData: Set isTimeout to true usePostData-->>Component: Provide partial post data end ```

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

[vaurdan]

@coderabbitai review

[coderabbitai[bot]]

Actions performed

Review triggered. > Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[vaurdan]

@acicovic I agree with you, I am a bit torn here, since this timeout will prevent the filter type UI from rendering for that amount of time, if any of the HTTP requests take to long or fail. Unfortunately, since we're doing the HTTP requests using Gutenberg's getEntityRecords, we don't have control/access to the requests, and it's not possible to check if they have either returned an error code, or if they are still running.

Although, and I tested this by throttling the connection in Chrome, if the endpoint is taking too long to respond, when it finally returns a valid response, the component will re-render and work as expected. But I think I agree with you that 200ms might be on the short side.

For how long do you suggest waiting? 500ms?

[acicovic]

If I understand correctly, this timeout will only slow down users when there's a problem (e.g blocked user endpoint). This system will not affect websites that work as expected. So, not all users will be forced to wait for these 200ms.

If the above is correct, in my opinion even waiting 1 second should be fine, since there would be an infinite freeze anyway if this fix wasn't in place. What I'm afraid of is introducing re-renders in configurations that work fine currently, and then having issues regarding that. If the user is using the tool while the re-rendering takes place, it could lead to a weird UX experience.

[vaurdan]

I might have found a way to tackle this using hasFinishedResolution and isResolving, from the core-data store. I will see if I can implement a better solution, and perhaps ditch the need for a timeout :)

[vaurdan]

@acicovic I changed the logic for the usePostData hook, and now instead of relying on the timeout, we're using hasFinishedResolution and isResolving to check if the data we need is actually ready to be used.

This has fixed the issue of having the UI waiting for the timeout before rendering the filter type Group Toggle, when one of the resolution fails. So it feels nearly instantaneous now :)