Styling of card loader

[soukiassianb]

Hi,

Is there a way to style the card loader ?
Maybe adding className attributes similar to the other components would do the trick.

Thanks,

Benjamin

[Kikobeats]

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?

[soukiassianb]

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.

[Kikobeats]

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

[soukiassianb]

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;
  }

[Kikobeats]

@soukiassianb

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

sdk/packages/react/src/components/Card/CardEmpty.js

Line 13 in 3e4c2c3

${emptyStateImageAnimation};

and actually it's an animation:

sdk/packages/react/src/components/Card/CardAnimation.js

Line 31 in 3e4c2c3

animation: ${emptyStateImagePulse} 1.25s linear infinite;

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!

[oyeanuj]

@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?

[Kikobeats]

@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 🙂

[BrianHHough]

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?