extra optimizations (by GPT)

What's Changed

• Extra GPT optimization and prettier by @Mariusthvdb in #83

Full Changelog: 2023010...2023010

In the original code, a new object is created on every iteration with the spread
operator (...). This can be inefficient if the number of iterations is large.
By creating the newAttributes object before the loop and then updating it inside the loop,
you only create a single object, which can be more efficient.

The original code also uses the Object.keys() function to get an array of the keys in
entity.attributes.templates, and then uses the forEach() function to iterate over the
array. This is an additional step that can add some overhead. In the optimized code,
the for loop is used instead, which can be a more efficient way to iterate over an array.

The optimized code also uses the optional chaining operator (?.[]) to access properties
of entity.untemplated_attributes, which can be more concise and readable than the
original code.

Overall, these changes can make the maybeApplyTemplateAttributes() function more
efficient, particularly if it is called frequently or if entity.attributes.templates
has a large number of keys.

This revised version of the updateMoreInfo function does not use requestAnimationFrame at
all.(.....) Instead, it selects all the necessary elements directly in a single call to
querySelectorAll. This can potentially be faster and more efficient than making multiple
querySelector calls and using getElementsByClassName, because it only requires the DOM to
be traversed once.

By wrapping the function in a requestAnimationFrame call, you can ensure that the browser
is able to optimize the rendering of the page and minimize the impact of the function on
the main thread. This can help improve the performance of the code and provide a smoother
user experience. However, if the updateMoreInfo function is not modifying the DOM, then
there may not be a need to use requestAnimationFrame. It would be up to you to determine
whether using requestAnimationFrame is necessary in this case.

Additionally, by eliminating the checkElements function and the use of
requestAnimationFrame, the revised version of the code is simpler and easier to read. r
equestAnimationFrame is a way to execute a function just before the browser is about to
repaint the page, and it is generally used to improve performance by allowing the browser
to handle DOM manipulation in an optimal way. However, in this case, the checkElements
function was being used to repeatedly check for the existence of certain DOM elements,
which is not the intended use of requestAnimationFrame. By selecting all the necessary
elements in a single call, the revised version of the code avoids the need to use
requestAnimationFrame for this purpose.

By storing the selected DOM elements in variables outside of the updateMoreInfo function,
they will only be selected once and then be referenced from the cached variables in
subsequent calls to the function, which should improve the performance of the code.

Avoid using .innerText to get the text of an element. Instead, use .textContent as it is
faster.

Instead of using Array.from(attributesEl.querySelectorAll(".data-entry")), you can
use [...attributesEl.querySelectorAll(".data-entry")] to create an array.
This is faster and more concise.

using the spread operator (...) is faster than Array.from() when creating an array from a
DOM collection. This is because Array.from() has to call the Array() constructor and has
to perform additional checks and operations, whereas the spread operator simply creates
a new array with the same elements as the original DOM collection