Plugin or code to show loading gif after click on submit button on wp-signup

I use new blog templates and need to show an animation or text to show users that the page is loadin(It takes 10-15 seconds to build the site..)
Is there any plugins or code that can do this, and be IE compatible.
I have tryed the code here:https://premium.wpmudev.org/forums/topic/how-do-i-show-loading-animation-after-registration-onclick-event#post-1126036
But I could not get it to work.
Could you also explain how to implement the code if you have a snippet?

  • Adam Czajczyk

    Hello Bjorn,

    I hope you're well today and thank you for your question!

    A code such as this is not a real "progress indicator/loading placholder". It's quite a popular solution but it's rather a "visual effect". The solution here should be able to detect whether the site is fully loaded or not and act based on this information.

    Usually such "loaders" are triggered on/off by ajax powered scripts working "behind the scenes". In short: user submits registration form which is then sent to an ajax script; at the same time a loader image is shown and only when ajax script responds with a result it triggers loader off.

    I'm not quite sure though if/how such workflow can be easily applied to that case. Let me please consult this with one of our developers then.

    Please keep an eye on this thread please and I'll update it as soon as I get any advice on this.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Bjorn!

    It seems that developers are a bit busy but I tested the code you tried to use initially. I put it into the "MU Plugin" ("Must Use" plugin) and added some styling and it seems to be working well after all. I attached a .zip file to this post so you may want to download and extract it and then upload the .php file from inside into the "/wp-content/mu-plugins" folder on your server to give it a try.

    I did however test it with a default WP signup and just a New Blog Templates installed but with no Pro Sites and any other plugins that would alter registration process.

    If you're using any plugin of that kind, this may need some additional adjustments so let me know please and I'll try to do something about it :slight_smile:

    Best regards,
    Adam

  • Bjorn

    The animation starts, but stops after 1-2 secounds.
    I use the following MU plugin to simplyfi signup:

    <?php

    function wpmu_auto_site_name_from_title() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
    $("#blog_title").keyup(function() {
    var title = $(this).val();
    title = title.replace(/ /g, '-').toLowerCase();
    $("#blogname").val(title);
    });
    });
    </script>
    <?php
    }
    if (!is_admin()) {
    add_action('wp_footer', 'wpmu_auto_site_name_from_title');
    }

  • Adam Czajczyk

    Hello Bjorn!

    Thank you for your replay.

    I think I'd like to examine it directly on your site. Since you didn't assign any site to this thread and the only one that's associated with your account doesn't really give me any option to signup ("wp-signup.php" page redirects to login) could you please share a link to the site in question with me here?

    In case it is the site that I checked (the one assigned to your WPMU DEV account) and it just needs me to login, could you please grant me a support access to it? Here's a guide on it:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Bjorn!

    Thanks for your replay and granting access.

    I checked the site and I can see what you mean about loading indicator showing up and disappearing. However this is actually how this script is supposed to work. That's what I referred to in my initial response to you :slight_smile:

    The "flow" is:

    - user click a button
    - "submit" action triggers the script
    - script shows that entire overlay
    - when the page is finally reloaded the script/overlay is loaded in an "initial state" so it's not shown.

    Taking this current behavior of the script, let me know please how would you expect it to behave after it's shown. I'll then see if we could modify it a bit or if a different approach is necessary.

    Is it also possible to include a text like "building site" on the side of the animation gif?

    Yes, that's possible. Simply add the text after the "img" tag like this:

    <img src="loading.gif" alt="" style="display:block;margin:40% auto 50% auto;"/> Building site....

    or if you wan't to style the text with CSS:

    <img src="loading.gif" alt="" style="display:block;margin:40% auto 50% auto;"/> <span style=" your css comes here "> Building site... </span>

    Best regards,
    Adam

  • Dimitris

    Hey there Bjorn,

    hope you're having a beautiful day and don't mind skipping in! :slight_smile:

    I was thinking the animation should run continous until page refresh/redirect. It is kind of a way to show the users that it is progress, and that the site are running , and not hanging..

    I just tested the snippet Adam provided in my test installation and seems to do what Adam mentioned:

    when the page is finally reloaded the script/overlay is loaded in an "initial state" so it's not shown.

    May I create a new test user from dashboard in order to proceed with a site creation to see this in action?

    I also noticed that in your other MU plugin you use
    title = title.replace(/ /g, '-').toLowerCase();
    which should throw you an error like
    Site names can only contain lowercase letters (a-z) and numbers.
    at least this is what happened in my end, so I replaced it with
    title = title.replace(/ /g, '').toLowerCase();
    :wink:

    Warm regards,
    Dimitris

  • Bjorn

    Yes I have beutiful days, I am on holliday in Greece.
    The other plugin is a plugin made by Wpmudev. I have not seen any errors when I use It.
    But anyway, my goal is tomsimplyfi the blog signup process compared to the default Wp.
    I think the original signup good for blog signups, but I will use It to create sites for project users, and not webmasters. But simplyfing can also be complicated to create. I now have 3 different Mu plugins interfering on the signup process, and on regular plugin.
    I think you are doing a creat job helping me make a custom signup process.
    I will grant extra time on the wpmudev dashboard for you.
    I am on vakation now and you dont have to rush to solve my custom signup challanges:slight_smile:..
    In general my hope is to end up with the following signup:
    1. when users have filled sitename and description, there will be an animation that runs to let the useres now that the site is beeing built.( new blogs template blogs takes some time to build..)
    2. The page rederects directly to the new site when the site is built in wp-signup.

  • Dimitris

    Hey there Bjorn

    Yes I have beutiful days, I am on holliday in Greece.

    That's awesome! I'm from Greece actually! :slight_smile:

    In order to keep up and made this work for you, I'll need some FTP details too, in case something goes wrong and should revert it. If I can work freely on your website, you must send us your details through our contact form https://premium.wpmudev.org/contact/ (as this is public forum) using this template:

    Subject: "Attn: Dimitris"
    -WordPress admin username
    -WordPress admin password
    -WordPress login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me. :slight_smile:

    Warm regards,
    Dimitris

  • Dimitris

    Hey there Bjorn,

    hope you're doing good today! :slight_smile:

    I just inspected your website and the registration process. Here's my findings:

    1. There were an error caused by /wp-content/mu-plugins/redirectnewuserproject.php
    Unfortunately, I wasn't able to make this work, meaning, redirect user after new blog creation to new created blog, so I left the action hook commented-out
    // add_action( 'wpmu_new_blog', 'wporg_wpmu_new_blog_example', 10, 6 );
    I'll come back to it later on, also get a second opinion from my colleagues. :wink:
    For now, default functionality shows user a message like
    "107684.net/yournewsite is your new site. Log in as “username” using your existing password."

    2. The loading area (transparent black box) is visible on submitting but the GIF image stops playing during page refresh (the form submit in which we trigger the whole animation only lasts couple of seconds). As another approach you can use a text notice for your users. I already placed one in there, hope that helps you.

    3. In /wp-content/mu-plugins/wpmudev.php made the little change that I mentioned in https://premium.wpmudev.org/forums/topic/plugin-or-code-to-show-loading-gif-after-click-on-submit-button-on-wp-signup#post-1131456, so that site title has no dashes.

    Warm regards,
    Dimitris

  • Bjorn

    I dont think this issue have anything to do with the crome install on my laptop. I think in general most browsers offer the users to stop pages that takes to load. I have seen this both in IE and crome on different sites.
    I think IE have a text like:"Website stopped responding". As I have many pre built forms,pages,and posts, it takes time to bulid the templates. The browsers can missunderstand and think the webpage have stopped responding. Is there anyway to make sure the browser don throw a error message for a long template building? My idea originally was that an animaton might made the browsers see that the page was active and not stopped responding.

  • Adam Czajczyk

    Hello Bjorn!

    Thank you for your response.

    I asked about browser because when I tested your site I didn't experience such behavior. I'm not saying though it doesn't happen, I just hoped to be able to reproduce it.

    I'm not aware though of any way to stop browser(s) from displaying such an error. The only way would be to speed up the site/scripts so it wouldn't take that much time to respond/complete. That's unfortunate but it seems like an only solution.

    Just to make sure: this happens only with the "loading" script enabled or without it as well?

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Bjorn!

    Thank you for your response. I just read again your recent post and it seems there's one thing that I didn't take into account: you mentioned several times that it takes even up to 10-15 seconds to build a site.

    I must say I never measured the time when testing it on your site but I don't think I experienced any significant delays. The site creation works a bit different on your setup than on regular setups as there's no user name etc but some kind of number/id required. I just used random set of numbers and letters there but just to make sure: is this connected to any external script/system? I mean, the ID that you put into site creation form - is it additionally verified in any way? This could be slowing down the site.

    As for progress bar with time estimation. Yes, that may be possible but this would mean getting back to what I explained in my very first response to your initial post, see here please:

    https://premium.wpmudev.org/forums/topic/plugin-or-code-to-show-loading-gif-after-click-on-submit-button-on-wp-signup#post-1127166

    Basically, such a script can't be just a piece of a JS displaying animated image but instead it would have to be "connected" to registration scripts. That's would be a complex task and would require quite a bit of custom coding which is well outside the scope of this forum.

    I think that such a progress bar could make a great UX improvement for site creation in WP but in this case it's a bit hard to decide whether it should be a part of Pro Site, of New Blog Templates or just a separate plugin for WordPress. In my personal opinion the latter would be the best choice because it would work with all the scripts/plugins that affect site registration. What I mean is that in case of "clean" WP setup this process is relatively fast but there may be many different plugins installed that make it longer so this way it would "catch them up".

    As I said though, this would require custom coded solution so you may want to post a question on our "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    Best regards,
    Adam

  • Bjorn

    I think its only new blogs template that would need progress bar on blog creation. As you say regular blog creation is quick. I dont use any external script, it is only the number of forms and pages in the templates that make the load time long. I think I will just use the text. As I understand the blog creation is Php script running server side, and should not trigger any "website not responding" issues. I guess the javascript showing the "building blog" text are done loading as soon as the text is shown?(and will not cause a "website not responding")

  • Dimitris

    Hey there Bjorn,

    hope you're having a beautiful day! :slight_smile:

    As I understand the blog creation is Php script running server side, and should not trigger any "website not responding" issues. I guess the javascript showing the "building blog" text are done loading as soon as the text is shown?(and will not cause a "website not responding")

    Blog creation is indeed a server side procedure. I just tested it in your website in Firefox and no "website not responding" message was triggered (in the Development version of FF the GIF image has never stopped playing too!), so I guess that you'll good to go with both a gif image and a descriptive text, just make sure to test this under different browsers to fix any minor inconsistencies that might occur.

    Kind regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.