How to remove filestack blue initial loader on initialization

Question

I have a button that pops up filestack uploader, Everything works fine. However, I am trying to override the blue spinner / loader that comes with filestack but I am unable to do so In my react application.

When I tried inspecting the filestack file in my dev tools I saw this piece

But I am unable to alter it in my global.css code.

This is what the current output looks like

This is what I have tried but it's not working

.fsp-loading::before {
  display: none !important;
}

#__filestack-picker.fsp-picker-appear-active {
  visibility: hidden !important;
  height: 0px !important;
  width: 0px !important;
}

I would appreciate any help on how I can remove this.

Answer 1

You code works but the issue is that there are two loaders:

/* ... */

/* one that You override, the "normal" one which is not used */

.fsp-loading::before {
    display: block;
    z-index: 10009;
    content: '';
    width: 43px;
    height: 43px;
    background: url(assets/images/loading-spinner.png) no-repeat;
    background-position: 50% 50%;
    animation: __fs-rotation-reverse .4s infinite linear;
    transform-origin: 50% 50%
}

.fsp-loading--folder {
    position: absolute;
    right: 10px;
    top: 8px
}

.fsp-loading--folder.center {
    position: absolute;
    right: 50%;
    top: 50%
}

/* one that You don't override, the "small" one which is used */

.fsp-loading--folder::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background: url(assets/images/loading-spinner-small.png);
    animation: __fs-rotation-reverse .4s infinite linear;
    transform-origin: 50% 50%
}

/* ... */

So add styles to the small one and it will hide it, like:

.fsp-loading--folder::after {
    display: none;
    
    /* or something else like */
    /* background: none */
    /* etc. */

}