"Removing the blue initial loader from Filestack during initialization: A step-by-step guide

Currently, I am facing an issue with a button that triggers the filestack uploader in my React application. The functionality works as expected, but I am struggling to override the default blue spinner/loader that is displayed with the filestack uploader.

Upon inspecting the filestack file using my browser's dev tools, I came across the following snippet: https://i.sstatic.net/cBXS1.png

Despite my efforts to modify it in the global.css file, I have not been successful in altering the appearance.

As a reference, the current output is shown here: https://i.sstatic.net/C61Co.png

I have attempted the following code snippet, but it has not produced the desired result:

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

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

If anyone has any suggestions or solutions on how I can successfully remove this default spinner/loader, I would greatly appreciate it.

cssreactjsnext.jsfilestack

Answer №1

Your code functions correctly, however the issue lies in the presence of two loaders:

/* ... */

/* The first loader that you override, the "normal" one which is not utilized */

.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%
}

/* The second loader that you don't override, the "small" one which is being 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%
}

/* ... */

To address this, apply styles to the small loader to hide it, such as:

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

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link: Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is no ...

cssfontssafarigoogle-webfonts

Next.js version 13 will now display the loading.tsx component whenever a setter function for useState() is

I am facing an issue with my client component that has a simple text field which utilizes the useState() hook. Every time I modify the text and call onChange, the loading UI defined in loading.tsx appears before the updated UI. However, this process causes ...

reactjstypescriptnext.jsreact-hooksnext.js13

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

htmlcssreactjsangularsass

Transforming an ES6 JSON object into a dictionary: a step-by-step guide

As someone who is new to learning ES6 and JQuery, please forgive me if this question has been asked before (I couldn't find similar ones). Currently, I am working on retrieving data from a JSON file in the following format: { EUR: { code: "EUR" ...

javascriptjqueryjsonajaxreactjs

What is the method for altering the icon within the KeyboardTimePicker component in material-ui-pickers?

Is there a way to customize the icon displayed in the KeyboardTimePicker component? I've looked into KeyboardButtonProps and InputAdornmentProps but I'm still unsure of how they can assist me... Link to my customized KeyboardTimePicker ...

javascriptreactjsmaterial-ui

Certain URL schemes are not supported by the react-native webview component

react: 16.9.0 react-native: 0.61.5, PROBLEM: I am currently utilizing the react-native-community/react-native-webview package to display a web view within my application. The URL scheme I am using is intent://cdn.glitch.com/, which is essentially a We ...

reactjsreact-nativereact-native-iosreact-native-webview

Custom AG Grid PCF Control - Styling without the need for a separate CSS loader

Struggling to implement AG Grid in a PCF control because CSS loaders are not supported. Are there any alternatives for adding CSS without using CSS loaders? Thanks. Source - "‎06-22-2020 11:38 AM Ah I see - the only supported way of including CSS ...

csswebpackag-gridpowerapps

The back-end is receiving an empty req.body when sending a post request

I'm facing an issue while trying to establish a connection between React and Express server. When attempting to retrieve the data sent from the React app in the backend's req.body, I am receiving an empty object. Here is my React code: export def ...

node.jsreactjsexpressaxios

Browser and contexmenu intersecting halfway

I have successfully implemented a custom context menu in my HTML project. It functions well, but I am facing an issue where half of the menu appears off-screen to the right. Is there a way to detect this and reposition the menu above the mouse pointer? He ...

javascripthtmlcss

Data not displaying in useFieldArray of React Hook Form

Hey everyone, I've successfully created a material UI form using react hook form and the useFieldArray hook. <Box component="form" onSubmit={handleSubmit(submit)}> <Grid container spacing={2}> <Grid item xs={12} ...

reactjsmaterial-uireact-hook-form

Next.js Adsense Ad Units

I am seeking assistance with incorporating Adsense ad units into nextjs. I have already implemented the auto-generated ads successfully, but I would like to customize them further. This is what I have done so far, but I am unsure if it is the optimal appro ...

reactjsnext.jsadsense

What is the best way to retrieve the height of a video during mounting, prior to rendering

I have a problem with rendering two tabs on a page. Each tab contains a video player and other elements below it. The issue I'm facing is that the layout glitches when switching between tabs. Can anyone provide assistance? Here is what I have tried s ...

reactjsmaterial-ui

Column 1 with fixed headers

Is there a way to make sticky headings in a single column scroll without them overlapping? Currently, my h1s are overlapping when I scroll down. Update: I would like the headings to stack on top of each other as I scroll, instead of being pushed off scree ...

cssbootstrap-5

It appears that custom metrics are not being logged in AWS CloudWatch Experiment

After setting up my Evidently project with one feature and a custom metric, I am facing an issue where Evidently is failing to record any events. Despite simplifying the troubleshooting process by using command line evaluation and event sending, the proble ...

reactjsamazon-web-servicesamazon-cloudwatchab-testingevidently

Top recommendations for implementing private/authentication routes in NextJS 13

When working with routes affected by a user's authentication status in NextJS 13, what is the most effective approach? I have two specific scenarios that I'm unsure about implementing: What is the best method for redirecting an unauthenticated ...

javascriptreactjstypescriptauthenticationnext.js

Add CSS styling to an ASP.Net webpage that utilizes the default master page

I have developed a new ASP.Net Web Application and inserted the following div in the Default.aspx file: <div id="TestDiv"> Hi, This is CSS test. </div> To style the above div, I included the following CSS in the Site.css file: #TestDiv{ colo ...

cssmaster-pages

reactjs implementation of a virtualized list

Recently, I stumbled upon the React-window library and found it to be incredibly useful. Intrigued by how it was built, I decided to try my hand at creating my own virtualized list. However, I encountered an issue where the list could only scroll up to it ...

javascriptreactjslistviewreact-virtualized

NextJS leading me to a fresh page packed with clickable links

Currently, I am attempting to create a functionality where clicking on the text in the navigation bar will smoothly scroll down to specific sections in my Next.js application. The code I currently have is as follows: <Link href="#About">Ab ...

reactjsnext.jsanchor

React NextJS: Unable to retrieve cookies or properties post redirection

Within my nextJS application, when a user logs in on the login page, a cookie is created with a token and then they are redirected to the main page which utilizes the main component. However, within the Main component, I am encountering an issue where the ...

javascriptreactjscookiesnext.js

What are some ways to increase the scalability of an HTML form?

My login page is easy to read on larger screens like laptops or tablets, but on mobile devices, users have to zoom in to see the text clearly. I want to make it more scalable, but I'm struggling to figure out how. Here's the HTML code: <!DO ...

htmlcss