0

When I write code in a code snippet I use the "RUN" button many times to check the current state of my code, but there is no indication to make sure if the result is changed so I click the Run button 2-3 times every time!

I suggest a Running/Waiting icon or a simple blink or something similar to indicate that the result is being updated.

3
  • I encounter this too, it can be unintuitive when you press the "Run" button and you don't see any visual change at all, especially when one's connection isn't perfect. Perhaps blank out the HTML (including any console messages) when the Run button is pressed, rather than when the stacksnippets.net/js response comes back. (This would be accomplishable rather easily with a userscript) Commented Jan 6, 2019 at 1:03
  • 1
    Add code that changes on every run. Something like console.log(Date.now()) might be enough... Commented Jan 6, 2019 at 20:18
  • For me pressing the RUN button 3 times is easier than a short line of code :) @HereticMonkey Commented Jan 6, 2019 at 21:05

1 Answer 1

-5

Here's a quick little userscript that will make the result iframe invisible until the iframe loads with the response from stacksnippets.net, which should make it quite clear when the snippet is being reloaded.

edit: made snippets in the page proper behave the same way, rather than just changing the iframe in the snippet interface

// ==UserScript==
// @name         Stack Snippet Status Indicator
// @description  Blanks out the snippet result's iframe while it's loading
// @author       CertainPerformance
// @version      1.1
// @match        https://stackoverflow.com/questions/*
// @grant        none
// ==/UserScript==

const fixIframe = (iframe) => {
  iframe.style.visibility = 'hidden';
  iframe.addEventListener(
    'load',
    () => {
      iframe.style.removeProperty('visibility');
    },
    { once: true }
  );
};

document.addEventListener('click', ({ target }) => {
  // While editing a snippet in the snippet interface,
  // match the blue "Run" button or its descendant:
  if (target.matches('#snpte-button-run, #snpte-button-run *')) {
    const iframe = document.querySelector('#snpte-box-edit-result');
    fixIframe(iframe);
  }
  // Match the blue "Run" button outside the snippet interface:
  else if (target.matches('.snippet-ctas button:not(.hideResults), .snippet-ctas button:not(.hideResults) *')) {
    const iframe = target.closest('.snippet-result').querySelector('iframe');
    fixIframe(iframe);
  }
});
1
  • 1
    I'm a bit confused, should I not have posted my solution to the problem? Did I do something wrong? Commented Feb 7, 2019 at 21:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .