Display "Loading" message while Tiddly is not responding

[bimlas]

It would be nice to display a message while Tiddly is not initialized, because visitors, who don't know why the page is not responding may leave it after a few seconds. Is this possible?

[TonyM]

Bimlas,

I think this would be a good idea. I am not sure how much this is possible in a single file wiki, but NoteSelf does this

Regards

Tony

[Jeremy Ruston]

There was a popular SplashScreenPlugin for TiddlyWiki Classic, but funnily enough I don’t think it’s ever come up for TiddlyWiki 5. Anyhow, there’s currently no support for a splash screen in the core, but it certainly could be added.

Best wishes

Jeremy. 

On 31 Aug 2018, at 08:46, bimlas <bimba....@gmail.com> wrote:

It would be nice to display a message while Tiddly is not initialized, because visitors, who don't know why the page is not responding may leave it after a few seconds. Is this possible?

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/93e2a558-41e7-4390-a9a2-d07921bc8e22%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[bimlas]

If I'm right, using a splash image is not possible because of the "chicken and egg" dilemma: you cannot display an image which is not exists yet (wiki filesystem is not initialized). But you can hardcode a CSS spinner or a message at least.

[Eric Shulman]

On Friday, August 31, 2018 at 7:01:52 AM UTC-7, bimlas wrote:

If I'm right, using a splash image is not possible because of the "chicken and egg" dilemma: you cannot display an image which is not exists yet (wiki filesystem is not initialized). But you can hardcode a CSS spinner or a message at least.

You CAN show a 'splash screen' image during startup; however, as you noted, the image can't be stored in a separate tiddler.  The workaround is to use a base64-encoded image that is directly embedded in some "raw markup".

Try this:

1) Copy a base64-encoded background image into the clipboard.  Here's one way:

Drag and drop the desired background image (JPG or PNG) into your TW.  This will create an image tiddler with base64-encoded image content in the resulting tiddler.  Then, right-click on the image displayed in that tiddler and select "copy image address" from the popup menu.  This will copy a dataURI with the base64 image code to the clipboard. After the image data is copied to the clipboard, the image tiddler is no longer needed.  You can DELETE the image tiddler.

2) Create a tiddler, e.g. "SplashScreen", tagged with "$:/tags/RawMarkup",containing:

<style>
body { background-size:cover; background-image:url("PASTE IMAGE DATA HERE"); }
</style>

As indicated above, paste the base64-encoded image URI from the clipboard in between the double quotes.

3) Create a tiddler (e.g, "MyStyles"), tagged with "$:/tags/Stylesheet", containing:

.tc-body { background-image: none; }

This CSS style is applied after the tiddlers are loaded, and hides the background image that was displayed by the SplashScreen raw markup.  Note that this is optional: if you want to leave the splash screen displayed, then you don't need this CSS.

That's it.  No fancy plugins, no core changes.  Let me know how it goes...

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[bimlas]

That's it.  No fancy plugins, no core changes.  Let me know how it goes...

https://g.redditmedia.com/Tt0N2jWtHr6UAVUesgo8woTPnRHJPp5EEu-shYyKDt0.gif?fm=mp4&mp4-fragmented=false&s=b36142b257e938a4975af9400645a10c

https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif

It works nicely! :D Thank you very much!

[bimlas]

Did you know? You can use animated GIFs; encode it on https://www.base64-image.de/ for example. See my page for demo: https://bimlas.gitlab.io/ - plase tell me if the site is not loading (Error 404/505) because I will see for another host in this case (I love GitLab, but pages are slow, or even worse: does not working).

[Ste Wilson]

Oohhh, that's cool!

[TonyM]

Eric and Bimlas Thanks.

This seems to me to be essential for any wiki, especially single file online since people may very well navigate away.

Bimlas - your animated gif is perfect and it gives the impression something is happening.

Do you mind if I use that same Gif for my own installs. It also match part of my branding?

I will raise a suggestion something like this be added to the core, or as a core plugin.

Regards

Tony

On Friday, August 31, 2018 at 5:46:56 PM UTC+10, bimlas wrote:

[Sylvain Naudin]

Le vendredi 31 août 2018 23:49:04 UTC+2, bimlas a écrit :

Did you know? You can use animated GIFs; encode it on https://www.base64-image.de/ for example. See my page for demo: https://bimlas.gitlab.io/ - plase tell me if the site is not loading (Error 404/505) because I will see for another host in this case (I love GitLab, but pages are slow, or even worse: does not working).

That's very cool ! We can imagine a cat eating tiddlers animation ^-^'

[bimlas]

I just Googled for the GIF, use it if you like. :)

[bimlas]

I just merged the SplashScreen and the removing of it in to one tiddler:

<script>
// Remove splash screen when Tiddly is loaded (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){
  document.body.style.backgroundImage = 'none';
}, false);
</script>


<style>
body {
  height: 80vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/gif;base64,IMAGE_DATA...");
</style>

[Jeremy Ruston]

I’ve added core support for splash screens here:

https://github.com/Jermolene/TiddlyWiki5/commit/cfb2d7c9c8d899729b67864070d1958b35cc0ca2

(And fixing a typo: https://github.com/Jermolene/TiddlyWiki5/commit/86f2de0ddaacc999e875121d9a941ef214ea0436)

You can see an example splash screen on the prerelease:

https://tiddlywiki.com/prerelease/#Creating%20a%20splash%20screen

The example splash screen demonstrates using CSS animations and images.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/670611e7-e618-4940-ac5b-f1a543cd8e06%40googlegroups.com.

[TonyM]

Jeremy

Great work and comprehensive demo. Perhaps explaining the use case in the documentation would help newbies.

Eg;

Larger tiddlywikis and those loaded over the internet may take a little time to load. Once loaded, performance improves, because it is now running within the browser. The splash screen ensures people know the loading process is taking place, reducing the chance they will leave your wiki.

Have we got a timeframe for the next release?

I have few "simple" documentation items in the github issues queue, and could submit more.

Regards
Tony

[Jeremy Ruston]

Hi Tony

Thanks, that’s very helpful. I’ve adjusted the docs here:

https://github.com/Jermolene/TiddlyWiki5/commit/f61a61c060fbbc13e7e305e1fa4f3580aa26a489

Many thanks,

Jeremy.

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
> To post to this group, send email to tiddl...@googlegroups.com.
> Visit this group at https://groups.google.com/group/tiddlywiki.

> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/25036386-251f-41bf-be62-6038a0d8186a%40googlegroups.com.

[Abraham Samma]

This is great Jeremy. For Progressive Web apps that use a tiddlywiki, this is a little redundant because a splash screen is already defined in the manifest file, otherwise this will be super useful for other cases.

[Abraham Samma]

The beauty of this method is that I don't need to worry about writing the JS code (though it's just a matter of writing one-line of code) for controlling it's removal every time I want to make s splash screen animation.

Here's my attempt: a material design spinner in simple black. Attached is the GIF of my attempt and the tid file if you want to try it out in your copy of the pre-release tiddlywiki.