ngneat / content-loader

⚪️ SVG component to create placeholder loading, like Facebook cards loading.

Home Page:https://netbasal.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Two packages/actual package not working with localhost

alexw10 opened this issue · comments

I am really confused when it comes to the two packages.
These both exist in NPM:
image
It looks like you published to ngx-content-loader. However, this one does not work for me it seems? but content-loader does.

How I am using it:

        <content-loader>
          <svg:rect x="0" y="0" rx="3" ry="3" width="100%" height="10" />
          <svg:rect x="20" y="20" rx="3" ry="3" width="100%" height="10" />
          <svg:rect x="20" y="40" rx="3" ry="3" width="100%" height="10" />
          <svg:rect x="0" y="60" rx="3" ry="3" width="100%" height="10" />
          <svg:rect x="20" y="80" rx="3" ry="3" width="100%" height="10" />
          <svg:rect x="20" y="100" rx="3" ry="3" width="100%" height="10" />
        </content-loader>

It seems like the old one /content-loader for the clip-path has something like clip-path="url(#uy19jgwmh8a)" but for the latest version of the ngx-content-loader one it puts in http:// in it like so clip-path="url(https://ngx-content-loader.stackblitz.io/#u5gh7bxo95n)" <--- did this via stackblitz which your example is not using latest version either by the way.

It seems this maybe a localhost issue where the svg is not rendering with localhost?
Seems this issue is related:
#28

I feel like the clip-path can just be the id? not really sure though I do not know much about how this works so hoping you will have more insight.

thoughts on this?

You need to use @netbasal/ngx-content-loader

I confirm @alexw10 report: at least in localhost absolute url doesn't work, changing the url to a relative one makes it work. Not tested in production.

Nothing changed... and now works 💯