PR#579: stop the spinner pushing page content down web subscribing or joining a hub - fedora-hubs

fedora-hubs

#579 stop the spinner pushing page content down web subscribing or joining a hub

Merged 6 years ago by abompard. Opened 6 years ago by ryanlerch.

ryanlerch/fedora-hubs subscribe-spinner into develop

stop the spinner pushing page content down web subscribing or joining a hub

Ryan Lerch • 6 years ago

8e91167

js/app/components/CompletionInput.css

file modified

+2 -1

		`@@ -28,9 +28,10 @@`
		`border-bottom-right-radius: 0px;`
		`}`

		`- .CompletionInput .SpinnerCircle {`
		`+ .CompletionInput .Spinner {`
		`position: absolute;`
		`top: 0;`
		`right: 0;`
		`z-index: 2;`
		`+ padding: .5rem;`
		`}`

js/app/components/HubHeader/HubHeader.css

file modified

+1 -1

		`@@ -20,7 +20,7 @@`

		`.HubHeader > .Spinner {`
		`position: absolute;`
		`- left: 1rem;`
		`+ left: 50%;`
		`}`

		`.HubHeaderRight .btn{`

js/app/components/Spinner/index.js

file modified

+1 -1

		`@@ -5,7 +5,7 @@`

		`render() {`
		`return (`
		`- <div className={this.props.className}>`
		+ <div className={`${this.props.className} Spinner`}>
		`<i className="fa fa-circle-o-notch fa-spin fa-fw"></i>`
		`</div>`
		`);`

js/app/widgets/halp/halp.css

file modified

+1 -1

		`@@ -84,7 +84,7 @@`
		`.widget-halp .view-more a {`
		`color: gray;`
		`}`
		`- .widget-halp .ModalAllRequests .SpinnerCircle {`
		`+ .widget-halp .ModalAllRequests .Spinner {`
		`display: inline-block;`
		`vertical-align: middle;`
		`}`

ryanlerch commented 6 years ago

in the future, we will probably want to make the spinner show in the icon
of the state button that is being updated, but this just does what we did
before, but with the new fa based spinners.

abompard commented 6 years ago

I also had to make the following changes to fix the spinners in the halp widget (and wherever the CompletionInput component is used:

--- a/js/app/components/CompletionInput.css
+++ b/js/app/components/CompletionInput.css
@@ -28,9 +28,10 @@
   border-bottom-right-radius: 0px;
 }

-.CompletionInput .SpinnerCircle {
+.CompletionInput .Spinner {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 2;
+  padding: .5rem;
 }
--- a/js/app/widgets/halp/halp.css
+++ b/js/app/widgets/halp/halp.css
@@ -98,7 +98,7 @@
 .widget-halp .view-more a {
     color: gray;
 }
-.widget-halp .ModalAllRequests .SpinnerCircle {
+.widget-halp .ModalAllRequests .Spinner {
     display: inline-block;
     vertical-align: middle;
 }

Also, when you need to work on the Spinner, I don't know what you workflow is like but you can force it to display by using the react-devtools extension, that allows you to set the properties and state of React components in the page. You just have to locate the component and set the isLoading state to "checked".

rebased onto 8e91167

6 years ago

ryanlerch commented 6 years ago

rebased, and applied the patch.