fix: added height on loading button to show indicator

[mafeoli]

O que foi feito? 📝

• Adição de um height porque o loading indicator não estava funcionando no botão

Screenshots ou GIFs 📸

Tipo de mudança 🏗

• Nova feature (mudança non-breaking que adiciona uma funcionalidade)
• Bug fix (mudança non-breaking que conserta um problema)
• Refactor (mudança non-breaking que melhora o código ou débito técnico)
• Chore (nenhuma das anteriores, como upgrade de libs)
• Breaking change 🚨

Checklist 🧐

• Testado no iOS
• Testado no Android

[gemini-code-assist]

Hello @mafeoli, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

Hello! Gemini here, providing a summary of this pull request by @mafeoli. The primary goal of this PR, as indicated by the title and description, is to fix an issue where the loading indicator was not visible on a button component. This was apparently due to the component lacking a defined height when in a loading state. The changes involve adding a specific height to the loading indicator's styled component to ensure it renders correctly.

Highlights

• Bug Fix: Loading Indicator Visibility: The main change addresses a bug where the loading indicator within a button component was not displaying correctly. This is fixed by explicitly setting a height for the loading indicator's styled component.
• Code Formatting: Several minor formatting adjustments were made across the styles.ts file, including adding eslint/prettier disable comments and adjusting spacing in styled component definitions.

Changelog

• src/components/Button/styles.ts
  • Added /* eslint-disable prettier/prettier */ and a blank line at the top of the file (lines 1-2).
  • Refactored the getTextColor function for minor formatting improvements (lines 102-139).
  • Adjusted spacing in the styled(TouchableComponent) definition (line 146).
  • Adjusted spacing in the styled(TypographyComponent) definition (line 170).
  • Added height: 55px to the Loading styled component to ensure the indicator is visible (line 181).
  • Adjusted spacing in the styled(DefaultIcon) definition (line 194).

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to fix the loading indicator visibility on buttons by adding an explicit height to it. The change is straightforward. My review focuses on ensuring the new height integrates correctly with the existing button styles and also touches on a code-wide linter disable.

Summary of Findings

• Linter Configuration: The eslint-disable prettier/prettier comment at the top of src/components/Button/styles.ts disables Prettier for the entire file, which could mask formatting issues or lead to inconsistencies. It's recommended to address the underlying Prettier conflicts or use targeted disables if necessary.
• Loading Indicator Sizing and Styling: The newly added height: 55px for the loading indicator (matching its width) might cause it to be clipped, as the button wrapper is 45px high with overflow: hidden. The value 55px is also a magic number and should ideally be a constant.
• Styling Readability: Consider adding spaces between styled components and their props for improved readability.

Merge Readiness

The pull request addresses an issue with the loading indicator. However, there are a couple of points regarding code style (ESLint/Prettier disable) and the specifics of the loading indicator's dimensions (potential clipping, magic number) that would be good to clarify and potentially adjust. Additionally, consider adding spaces between styled components and their props for improved readability.

I recommend addressing the feedback provided in the review comments before merging. As the reviewer, I am not authorized to approve pull requests, so please ensure further review and approval as per your team's process once the changes are made.

[gemini-code-assist]

I notice /* eslint-disable prettier/prettier */ was added at the top of the file. While sometimes necessary for specific lines, disabling Prettier for an entire file can lead to inconsistencies and make it harder to maintain a uniform codebase style. Could you clarify the reason for this? Perhaps we could resolve the underlying Prettier conflict that prompted this, or if a specific line is problematic, use a more targeted // eslint-disable-next-line prettier/prettier comment just for that line?

[gemini-code-assist]

This change sets height: 55px for the Loading component, matching its existing width: 55px. There are a few points to consider here:

1. Potential Clipping: The ButtonWrapper (which contains this Loading indicator) has a height of 45px (derived from the buttonSize constant on line 54) and also an overflow: hidden style (line 158). This means a 55x55px loading indicator will be clipped by 10px in height (5px from the top and 5px from the bottom, if centered). Is this clipping the intended behavior? If the indicator should be fully visible and fit within the button, its dimensions might need to be closer to buttonSize (45px) or slightly less to account for any internal padding.
2. Magic Number: The value 55px is used for both width (line 180) and now height. If this dimension is intentional and distinct from buttonSize, could we define it as a constant (e.g., const loadingIndicatorDimension = 55;) at the top of the file for better clarity and maintainability?

[mdlucas]

@mafeoli melhor deixa habilitado e ajustar a identação