Check for wf-loading class to be in the html element before injecting

[marcosvrs]

As a workaround on the current issue where the injection of the WPP library throws an error if the WhatsApp web app isn't completely loaded, we wait until the class wf-loading is added to the html element so we know the web app is loaded, and the WPP can be injected safely. This should work around the issue #27 while we don't have a final solution from wppconnect.

[marcosvrs]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Analysis

• 🎯 Main theme: This PR is a workaround for an issue where the injection of the WPP library throws an error if the WhatsApp web app isn't completely loaded. The solution is to wait until the class wf-loading is added to the html element, indicating that the web app is loaded, before injecting the WPP library.

• 📝 PR summary: The PR modifies the wa-js.ts file to check for the presence of the wf-loading class in the html element before injecting the WPP library. It also introduces a MutationObserver to watch for changes in the html element's class attribute. Additionally, it modifies the manifest.json file to include wppconnect.js in the list of web accessible resources.

• 📌 Type of PR: Bug fix

• 🧪 Relevant tests added: No

• ⏱️ Estimated effort to review [1-5]: 4, because the PR involves changes in the core functionality of the application and requires a deep understanding of the WPP library and the MutationObserver API.

• 🔒 Security concerns: No security concerns found

  PR Feedback

• 💡 General suggestions: The PR addresses a critical issue and provides a workaround solution. However, it would be beneficial to include error handling for the import statement and the observer. Also, it would be better to encapsulate the logic of checking the wf-loading class and injecting the WPP library into a separate function for better readability and maintainability.

• 🤖 Code feedback:

  - **relevant file:** ``src/wa-js.ts`` **suggestion:** It would be beneficial to add error handling for the dynamic import of the WPP library. This could be done by wrapping the import statement in a try-catch block. [important] **relevant line:** [WPP = await import(/* webpackChunkName: "wppconnect" */ '@wppconnect/wa-js');](https://github.com/marcosvrs/WTF/pull/28/files#diff-dcd43ceb12b34ef92a901bab9a6a82bfd1b9106d606a58b09dbd992a54c9b3bdR162) - **relevant file:** ``src/wa-js.ts`` **suggestion:** It would be better to encapsulate the logic of checking the `wf-loading` class and injecting the WPP library into a separate function. This would improve the readability and maintainability of the code. [medium] **relevant line:** [function mutationCallback(mutations: MutationRecord[], observer: MutationObserver) {](https://github.com/marcosvrs/WTF/pull/28/files#diff-dcd43ceb12b34ef92a901bab9a6a82bfd1b9106d606a58b09dbd992a54c9b3bdR154) - **relevant file:** ``src/wa-js.ts`` **suggestion:** It would be beneficial to add error handling for the observer. This could be done by checking if the observer was successfully created before calling the observe method. [medium] **relevant line:** [observer.observe(targetNode, config);](https://github.com/marcosvrs/WTF/pull/28/files#diff-dcd43ceb12b34ef92a901bab9a6a82bfd1b9106d606a58b09dbd992a54c9b3bdR183)

How to use

Instructions

> Tag me in a comment '@CodiumAI-Agent' and add one of the following commands: > **/review**: Request a review of your Pull Request. > **/describe**: Update the PR title and description based on the contents of the PR. > **/improve [--extended]**: Suggest code improvements. Extended mode provides a higher quality feedback. > **/ask \**: Ask a question about the PR. > **/update_changelog**: Update the changelog based on the PR's contents. > **/add_docs**: Generate docstring for new components introduced in the PR. > **/generate_labels**: Generate labels for the PR based on the PR's contents. > see the [tools guide](https://github.com/Codium-ai/pr-agent/blob/main/docs/TOOLS_GUIDE.md) for more details. >To edit any configuration parameter from the [configuration.toml](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml), add --config_path=new_value. >For example: /review --pr_reviewer.extra_instructions="focus on the file: ..." >To list the possible configuration parameters, add a **/config** comment.