Intro Slides Visible after making as complete

ionic-v1
1

Using the intro template provided by the Ionic guys, seen here, I have a small app that will go through the tutorial before getting to the main view. But what I’m noticing is that upon launching the app, it’s visible for a moment before transitioning to the main view.

Now this isn’s a crazy issue but what I was wondering if there was a better way to speed up the reading of the local storage.

I came up with one idea where after the angular reads the local storage and changes the view, I hide the splash screen. Fixes the issue, but the splash screen is shown for a longer amount of time.

Any ideas on how I can reduce the splash screen display time without having the intro view visible?

2

How about using a resolve in your config? The resolve will not allow the state change until you know the status of ‘didTutorial’. So, the intro won’t flash.

3

@Calendee what I figured would work would be to set a call back in my $scope.startApp(); function, but still not working. I set the auto-hide-splash-screen option to false in the config.xml file so I can control when to show and hide the splash screen through angular.

$scope.startApp = function () {
		$state.go('home');
		window.localStorage.didTutorial = true;
	};

$scope.hideSplash = function(){
		navigator.splashscreen.hide();
	};

if (window.localStorage.didTutorial === "true") {
		console.log('Skip intro');
		$scope.startApp(
		      $scope.hideSplash
                 );
		
	}

To my understanding, this should work, but it’s still hiding the splash screen before the transition. I figured this would be the safest bet since I’m not too familiar with ui-router and all of its option.

4

Maybe try something like this :

.run(function ($http, $rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function (event, next, current) {

        if(next.name.indexOf('intro') !== -1 ) {

            if( !window.localStorage.didTutorial) {
                event.preventDefault();
                $state.go('intro');
            }
        }

    });
})
5

@Calendee I gave that a try but was still seeing the intro. What I ended up doing was setting up specific events in each of my controllers

So in my IntroCtrl, when I check Local Storage, I set up an else statement so that if the user didn’t do the into, it would hide the splash screen

if(window.localStorage['didTutorial'] === "true") {
    console.log('Skip intro');
    startApp();
  }
  else{
  setTimeout(function () {
		navigator.splashscreen.hide();
	}, 750);
  }

Then if the user did the into, and was brought to the main state, the controller there would take care of the splash screen

.controller('MainCtrl', function($scope, $state) {
  console.log('MainCtrl');
  
  setTimeout(function () {
		navigator.splashscreen.hide();
	}, 750);
  
  
  $scope.toIntro = function(){
    window.localStorage['didTutorial'] = "false";
    $state.go('intro');
  }
});

I added a timeout to each call so that there would be a safe amount of time to allow for the transitions. 750 ms was a good guess (good enough for me at least) but if there is an actual time on how long the transition last, that timeout value can be set to that.

6

Hey @Calendee sorry to bring up an old post but my client has fallen out with my quick solution. It was more like a band-aid and setting up a resolve seems to be more of a correct way to address the problem. Though I am having some trouble trying to figure out what I have to do.

So I have my intro state like this

 //Intro State
  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl',
    resolve: {
      app: function ($scope, window, console, navigator) {
        if (window.localStorage.didTutorial === 'true') {
          $scope.startApp(function () {});
        } else {
          console.log('Need to do into');
          navigator.splashscreen.hide();

        }
      }
    }
  })

But the whole app breaks and noting loads. Any ideas?

7

I THINK the problem is that you are not returning anything with your resolve. Resolves are supposed to … “resolve” to a result. NOTE : You can also just return a value.

I don’t know if you’re allowed to put that other stuff in.

The return value of $resolve is a promise for an object that contains (in this order of precedence)

any locals (if specified)
the resolved return values of all injectables
any values inherited from a parent call to $resolve (if specified)

Try something like this:

//Intro State
  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl',
    resolve: {
        didTutorial : function() {
        	return window.localStorage.didTutorial;
		}
      }
    }
  })


.controller('IntroCtrl', function($scope, $state, didTutorial) {
	
	if(didTutorial) $state.go('some-other-state');
})
8

How do we try this using Ionic 3 ??