Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invoking spinner before a "promise" not working #392

Open
slferris opened this issue Jun 8, 2024 · 5 comments
Open

Invoking spinner before a "promise" not working #392

slferris opened this issue Jun 8, 2024 · 5 comments

Comments

@slferris
Copy link

slferris commented Jun 8, 2024

I'm still learning javascript and trying to get spin.js to work in a project.

Spinner works for me after a " window" command loads in app.js. But I don't understand how to make it work before a "fetch" promise in another .js module. Per your instructions I code the lines before the "fetch":

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

but it tells me Spinner is undefined. I tried adding "import { Spinner } from './spin.js'" like I have in my app.js, but that didn't work either.

Thanks, spin.js is obviously a work of art.

@slferris
Copy link
Author

slferris commented Jun 8, 2024

Another question: I would like to see the spinner after this command:

form.addEventListener('keyup', function (e) {
e.preventDefault();
const value = input.value;

Thanks

@slferris
Copy link
Author

slferris commented Jun 8, 2024

I think I can resolve the issues above if I can get this command to work:

import { Spinner } from './spin.js';

that, for example, precedes these two lines in a specific module:
var target = document.getElementById('value');
new Spinner({ color: '#F38E00', lines: 12 }).spin(target);

@slferris
Copy link
Author

slferris commented Jun 9, 2024

Sorry for all the muddle above. Please ignore my many previous posts. I think I somehow got the Spinner working pretty well in my project. But I'm still wanting to learn and understand the product and javascript better.

In the project I am working on that involves waiting for data to be sent from an api, I have a "promise" involving the lines:

const response = await fetch(url);
const data = await response.json();
return data;

In this case, the Spinner displays just fine until the api data is returned and then it disappears. However, when awaiting input from a local user in order to proceed to a new page, the Spinner sometimes appears, depending on other display items on the screen that may hide it. When I can see it, it does not rotate; also, when I can see it, it is not in the same place on my screen as in those instances involving an api. How can I display Spinner rotating and on the screen where I can always see it, as the way it works when an api is involved? Is the Spinner not intended for use except with api's, or is there some way I can eliminate it's erratic behavior. Thanks for your patience.

@slferris
Copy link
Author

Found a bug in my code, and now Spinner is working. I've noticed that as long as I have these lines in place:

import {Spinner} from 'spin.js';
var target = document.getElementById('foo');
new Spinner({color:'#fff', lines: 12}).spin(target);

I never have to employ stop(target). I guess your spin.js knows when to stop. Is that how it is supposed to work?
If so, very nice.

@theodorejb
Copy link
Collaborator

The spinner shouldn't automatically stop. Are you removing or hiding the element that contains the spinner or a parent element?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants