Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling...

https://i.sstatic.net/FFCRW.png

My goal is to show the loading indicator when any action, like deleting an item or changing quantity, is triggered in React.js + MobX. I have a boolean flag set up, but placing the loading indicator over the form has proven to be quite challenging.

This is a snippet from the source code of the cart component:

import React, { useEffect, useContext } from "react";
import { Container, Row, Col } from "react-bootstrap";
import PromotionalCode from "./PromotionalCode";
import { observer } from "mobx-react-lite";
import { RootStoreContext } from "../../app/stores/rootStore";
import CartBody from "./CartBody";
import CartSummary from "./CartSummary";
import BasicSpinner from "../../app/common/spinners/BasicSpinner";
import Section from "../../app/common/Page/Section";
import TextContainer from "../../app/common/Page/TextContainer";

// Rest of the code here...

The end goal is something similar to this: https://i.sstatic.net/CNXyK.png

Is there a way to achieve this seamlessly?

javascriptcssreactjsoverlaymobx-react

Answer №1

To create an overlay and spinner within your form, you can utilize absolute positioning. Ensure that both elements are placed at the bottom of your form.

.form {
  // Make sure to use relative positioning for your form

  position: relative;
}
.overlay {
  position: absolute;

  // This will expand the overlay to cover the entire width and height of the form
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.1); // A slightly transparent grey color
}

.spinner {
  position: absolute;

  // Center the spinner within the form
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

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

Organize rows in the table while maintaining reactivity

A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...

javascripthtmlangular

Developing typeScript code that can be easily translated and optimized for various web browsers

Can TypeScript alleviate the worry of having to use code such as this (especially when considering browsers like IE that may not support indexOf)? arrValues.indexOf('Sam') > -1 Does the transpiling process in TypeScript generate JavaScript c ...

javascripttypescriptinternet-explorer

Automate your Excel tasks with Office Scripts: Calculate the total of values in a column depending on the criteria in another column

As a newcomer to TypeScript, I have set a goal for today - to calculate the total sum of cell values in one column of an Excel file based on values from another column. In my Excel spreadsheet, the calendar weeks are listed in column U and their correspon ...

javascriptexceltypescriptoffice-scriptsexcel-online

Dealing with a div height problem in HTML/CSS

I'm experiencing an issue where my footer is overlapping with the bottom of my div. I've attached an image for reference but I can't seem to figure out what's causing the problem. I've tried adjusting the height values without succ ...

htmlcss

JustGage error: Unable to locate element with ID 0 in AngularJS

I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...

javascriptangularjsjustgage

Is there a way to personalize the title and text of a tooltip within Apexchart?

I am working on creating a scatter plot using Apexchart to demonstrate the correlation between two sets of data. I want to personalize the tooltip in the chart by adding a distinct title for each pair of x and y values. Here is my current JSX setup, where ...

reactjschartsjsxscatter-plotapexcharts

Debugging Slideshows Using JavaScript

I am currently working on creating a slideshow and I'm facing some challenges with the JavaScript functionality. Everything seems to be running smoothly except for one issue - when I click right once, it transitions correctly, but if I then click left ...

javascriptjqueryhtml

Finding the value of an input without having to submit it first and searching for it within a datalist

> Here is an example of HTML code <label>Person</label> <input name="PersonID" type="text" id="PersonID"> <label>Car Plate Number</label> <input name="PersonsCarPlateNumber" list="PersonsCarPlateNumbe ...

javascriptphphtmldatabasexampp

Switch between clicking and hiding

I am currently working on data tables and have successfully loaded my table via ajax, which also populates a new row drop down. However, I am experiencing an issue where I can get the row to drop down but cannot get it to close again. It simply adds the ...

javascriptjquerydatatables

retrieve JSON object from deferred response of AJAX request

After utilizing Ajax to send an item to a SharePoint list, I aim to incorporate the jsonObject received in response into a list of items. Located in AppController.js $scope.addListItem = function(listItem){ $.when(SharePointJSOMService.addListIte ...

javascriptjqueryajaxangularjsdeferred

Can an additional height be added to the equalizer to increase its height?

Is it feasible to append an additional 35px to the height determined by Foundation Equalizer? For instance, if Equalizer computes a height of 350px, I would like to increase it by 35px. This means that the resultant style should be height: 385px; instead ...

javascriptjqueryzurb-foundation

Combination of AngularJS and jQuery

I have a page in which additional input fields are dynamically added based on the selection made in a drop-down menu. This page is powered by angularjs, but I had to use jQuery specifically for adding these extra input fields. Here is the HTML code snippe ...

javascriptjqueryhtmlangularjs

The child component is not displaying the default value being passed from the parent in the

Currently, I am in the process of developing a form using Reactjs that relies on defaultValues provided by the parent component. The issue arises when the parent component sets the values' states through an axios post and then passes them down to the ...

reactjsmaterial-uitextfield

Close session when browser/tab is exited

After extensive searching online, I have been unable to find a satisfactory solution for ending a session when a browser or tab is closed without requiring the user to log off. I have attempted numerous JavaScript codes that I came across, but none of the ...

javascriptjqueryasp.netajax

css: text not enclosed by a span tag

I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border. ...

htmlcss

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

javascriptjqueryasp.net-mvcdatatables

AngularJS postback method fails to trigger

Seeking assistance with my angularJS AJAX postback method. Below is the HTML code I have created: <html xmlns="http://www.w3.org/1999/xhtml" ng-app> <head runat="server"> <title></title> <script src="Scripts/angular.js ...

javascriptjqueryasp.netangularjsajax

Understanding the concept of objects in JavaScript can be quite essential for

As I delve into a JavaScript file, I stumble upon the following lines: var myPage = new Object(); var myDocument = document.all; After some code, there is another interesting snippet: myPage.Search = myDocument.Search; myPage.Search.searchType = "Descri ...

javascriptajaxeclipseeclipse-pluginaptana

What is the best way to identify the property of an object that holds a specific value?

Searching through an object array in JavaScript to find a specific value and identify the property containing that value is my current task. Here's an example: Object Array: var objArray = [{ "ID": 1, "Name": "Kathy", "Position": "Progra ...

javascriptarraysjson

conceal bullet points with CSS in React

I have been attempting to hide the bullet points in a list, here's what I've tried: <ul sytle={ styles.ulclass }> <li>. . . </li> and ulclass:{ display:'flex', flexDirection: ' ...

reactjsstyles