Styling of card loader about sdk HOT 8 OPEN

Hello,

It should be possible, see https://microlink.io/docs/sdk/getting-started/styling/#css-classes

Can you try .microlink_card__progress_bar and/or .microlink_card__spinner?

from sdk.

Thanks for your quick answer!

Sorry, I meant the CardEmpty component displayed while data is fetching. I've been able to override some of the attributes but it's a bit hacky since there's no className for it, if I'm not mistaken.

from sdk.

Hum, you're right

https://github.com/microlinkhq/sdk/blob/master/packages/react/src/components/Card/CardEmpty.js

Right now there is not a specific class name associated with those components.

Probably it's a good idea to add them 🙂

In the middle time, you can target those components using

.microlink_card__content span:nth-child(1) {}
.microlink_card__content span:nth-child(2) {}
.microlink_card__content span:nth-child(3) {}

That's probably the thing you are doing right now (appreciated if you can share your code)

Also you can play a bit with the code here https://sdk-react.microlink.io/?path=/story/props--loading

from sdk.

Thanks,

Yes I've been able to successfully override the loading spans with the following code

  .microlink_card__content {
    > span {
      background: ${COLORS.customBackground};
      animation: ${customStatePulse} 0.75s linear infinite !important;   
    }
  }

They are replaced / hidden once data is fetched.

However, I'm unsuccessful with regards to the image placeholder.
This codes successfully overrides the image loading animation but images are not displayed once loaded. The loader stays visible.

.microlink_card__media.microlink_card__media_image {
    background: ${COLORS.mainBackground};
    animation: ${customStatePulseStateImagePulse} 1.25s linear infinite !important;
  }

from sdk.

@soukiassianb

I think this is the piece of code you want to overwrite:

and actually it's an animation:

so you need to overwrite the animation or disable it in order to use a static background value.

please correct me if I'm wrong!

from sdk.

@Kikobeats Also struggling to have placeholder in the image area. Would a better way be to have a loading or placeholder appended to the class of the component/iframe when the data is being fetched? Then we can style using that class on our end?

from sdk.

@oyeanuj although that is not the original issue reported here, I think it could be considered related, and it should be the way to go: Be possible to customize the Placeholder component, even provide your own implementation.

Working on it 🙂

from sdk.

Has anyone been able to replicate this loading state as defined in the docs in React: https://sdk-react.microlink.io/?path=/story/props--loading

I am using styled components and I am able to target the div element but not the loading component as mentioned above:

import styled from 'styled-components';
import Microlink from '@microlink/react'

export const PreviewCard = styled(Microlink)`
     div {
          background-color: darkgrey !important;
     }
     
     // NOT WORKING:
     div > .microlink_card__media.microlink_card__media_image {
          animation-duration: 1s;
          animation-name: pulsate;
          animation-iteration-count: infinite;
          animation-direction: alternate-reverse;

          @keyframes pulsate {
                    0% {
                              background: lightgrey;
                    }
                    100% {
                              background: darkgrey;
                    }
          }
     }
`

Is it better to target a pseudo-class/::before to target an animation background on loading before the image and text return back from the API call or is there another way to do it where it's technically pulsating in the background, and elements just get placed ontop of the element?

from sdk.