Analysis of Overdrawing in Queuehub

To start in this video you can see the state of overdrawing before micro-optimization the application, in the sign in screen and in detailed screen you can see the areas where the UI has more overdrawing. Here we found an opportunity to do an optimization.

In the video from Queuehub, it can be seen how overdraw has been avoided on the login screen by removing colors from components that have the same color as the background. Overdraw signals (red color) only appear when the keyboard is opened. It is important to note that the search bar also shows overdraw, but this is unavoidable as it is a component that sits on top of others.

The main changes make to sign up screen can be seen in the following image, lines 276 and 277 define the background of the text field.

As you can see, the card was removed, and the TextField´s background color was changed to transparent. This is the old code:

The same process was made in others text field.

In the sign up screen, cards were removed and background were changed to transparent

This is the old code:

On the main screen, overdraw is seen in common class components and the welcome message, especially in images. This happens because the listed elements are a different color from the background, which makes it impossible to avoid overdraw. The same scenario happens on the Queues screen. Although the Recommended screen shows similar results, it can be seen that, apart from the listed elements, the rest of the components remain in blue-green colors (including the navigation bar).

On the profile screen, a similar case occurs because each component has a different color, which is important to help users distinguish sections of the screen.

Finally, the Detail screen shows almost no overdraw, with all components in blue-green colors, except for the image.

In conclusion, overdraw was avoided on most screens, appearing only in cases where it is necessary to keep sections distinct, such as in lists and icons.