Exploring the idea of adding loading functionality to a component has led me to consider different approaches.
Initially, I thought about creating a Higher-Order Component (HOC) that would handle the loading state and text while preventing click events from passing through. The structure I envisioned looked like this:
<loading-hoc :active="loading">
<my-component></my-component>
</loading-hoc>
Upon implementing this solution, I noticed in the Vue dev tools the following representation:
https://i.sstatic.net/urUNW.png
Further exploration led me to ElementUI's approach, which involves using a directive to incorporate a DOM element into the current component. This implementation can be viewed here.
Question:
What are the advantages and disadvantages of each method? Is there a preferred way to achieve this?
From my perspective:
a) Utilizing a HOC:
- Results in a verbose tree displayed in dev tools (negative)
b) Implementing a directive
- Adds DOM nodes from outside the component (negative)