When/how to use skeleton loaders

I am on a project where we have different views in terms of medical data (user list, forms, vital signs, documents, graphs etc.). I read about skeletons and when to use them but when in practice, it is a bit different case. Let's say, I have opened a view with a graph. First the view must load and second a graph which is from another provider. In this case, there are 2 loaders, first, there is a loading spinner for the view (window with toolbar etc) and when this loads there is a skeleton loader for the graph itself. Is this a good approach? I understand when we have some sort of list or table, we can use a skeleton loader to progressively load elements so that the user has a feeling of progress. But to have the first spinner and then skeleton seems a bit off yet it is two-step loading from a different provider.

The second thing I can not understand is on what level should we draw skeleton loaders. I read that the skeleton loader must represent data 1:1, but to have a skeleton for every string or element is a bit overwhelming, isn't it? Also, if you don't know how many elements are in a list (if you would know, then the items are already loaded right?) if the system shows skeleton loader with 5 items and then it shows 1 or 50, isn't this a bit confusing or should every single element have skeleton loader? Also is there is an SVG of the skeleton loader, and if there is no sign of progressing loading of elements, isn't it better to use spinner then? I am just a bit confused about how skeleton loaders work (render) and putting them in "real life". A discussion from this community would help