fgnass / spin.js

A spinning activity indicator
http://spin.js.org
MIT License
9.3k stars 1.02k forks source link

Invoking spinner before a "promise" not working #392

Open slferris opened 1 month ago

slferris commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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