How to Make a Splash Screen

How do I make a splash screen?

Further reading:

App Launch time & Themed launch screens (Android Performance Patterns Season 6 Ep. 4)
Splash screen in Android: The right way

Old answer:

HOW TO: Simple splash screen

This answers shows you how to display a splash screen for a fixed amount of time when your app starts for e.g. branding reasons. E.g. you might choose to show the splash screen for 3 seconds. However if you want to show the spash screen for a variable amount of time (e.g. app startup time) you should check out Abdullah's answer https://stackoverflow.com/a/15832037/401025. However be aware that app startup might be very fast on new devices so the user will just see a flash which is bad UX.

First you need to define the spash screen in your layout.xml file

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical" android:layout_width="fill_parent"
          android:layout_height="fill_parent">

          <ImageView android:id="@+id/splashscreen" android:layout_width="wrap_content"
                  android:layout_height="fill_parent"
                  android:src="@drawable/splash"
                  android:layout_gravity="center"/>

          <TextView android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Hello World, splash"/>

  </LinearLayout>

And your activity:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class Splash extends Activity {

    /** Duration of wait **/
    private final int SPLASH_DISPLAY_LENGTH = 1000;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.splashscreen);

        /* New Handler to start the Menu-Activity 
         * and close this Splash-Screen after some seconds.*/
        new Handler().postDelayed(new Runnable(){
            @Override
            public void run() {
                /* Create an Intent that will start the Menu-Activity. */
                Intent mainIntent = new Intent(Splash.this,Menu.class);
                Splash.this.startActivity(mainIntent);
                Splash.this.finish();
            }
        }, SPLASH_DISPLAY_LENGTH);
    }
}

Thats all ;)

How do I create a splash screen in VueJS?

A LoadingScreen.vue component could look like this:

<template>
  <div :class="{ loader: true, fadeout: !isLoading }">
    Loading ...
  </div>
</template>

<script>
export default {
  name: "LoadingScreen",
  props: ["isLoading"]
};
</script>

<style>
.loader {
  background-color: #63ab97;
  bottom: 0;
  color: white;
  display: block;
  font-size: 32px;
  left: 0;
  overflow: hidden;
  padding-top: 10vh;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
}

.fadeout {
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
</style>

Be aware that the loader needs to be aware if loading is done to be able to fade out. You need to check that in your App as well, so it's not showing while it still needs to prepare data. Otherwise, information from the app part in the background could be leaking (for example scrollbars might be visible on the LoadingScreen). So App.vue could have a template like this:

<template>
  <div id="app">
    <LoadingScreen :isLoading="isLoading" />
    <div v-if="!isLoading">
      ...your main content here...
    </div>
  </div>
</template>

If you want to have the LoadingScreen divs to disappear completely, you need to manage the state of the fadeout animation in the App.vue itself, making it a bit more complicated (I'd probably use two props for LoadingScreen then: isLoading and fadeout, where fadeout is a callback that gets called in LoadingScreen as soon as the fadeout animation is complete).

I have prepared a codesandbox for you with the state management inside the LoadingScreen.

How to make splash screen show for 5 seconds and then disappear in ReactNative

Try something along this line

    const [showSplash, setShowSplash] = useState(true);
     useEffect(() => {
      AsyncStorage.getItem('alreadyLaunched').then(value => {
          if(value == null){
             setTimeout(() => {
          setShowSplash(false)
        },5000)
            AsyncStorage.setItem('alreadyLaunched','true');
            setIsFirstLaunch(true);
          }else{
            setIsFirstLaunch(false);
          }
      })
   },[]);
    
  

    if (isFirstLaunch == null && showSplash){
         return (
           <SplashScreen/>
         )
       } add

Flutter How to show splash screen only while loading flutter data

to keep SplashScreen while processing data rather than handling
SplashScreen with delayed.

Why not change the delayed?

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: _processingData(),
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if(snapshot.connectionState == ConnectionState.waiting)
          return SplashUI();    ///Splash Screen
        else
          return MainUI();       ///Main Screen
      },
    );
  }

  Future<List> _processingData() {
    return Future.wait[
      _getFtpFile(),
      _dataProgress(),
    ];
  }
}

How to display Splash screen in reactjs

You need to create a idle timer to trigger after inactivity of the
user in Homepage
When setTimeout triggers the callback it will mount the Splash
Once Splash is mounted, click on the Link tag says TAP HERE back to redirect to home

Homepage -
(path = "/home")

import React,{ useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Homepage= () => {
  let navigate = useNavigate();

  useEffect(() => {
    //Idle timer

    let timerId;

    const resetTimer = () => {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        navigate("/splash");
      }, 30 * 1000); //30 sec idle time
    };

    document.addEventListener("keydown", resetTimer);
    document.addEventListener("mousemove", resetTimer);
    return () => {
      clearTimeout(timerId);
      document.removeEventListener("keydown", resetTimer);
      document.removeEventListener("mousemove", resetTimer);
    };
  }, []);
}

Splash - (path = "/splash")

const Splash = () => {
  return <div>
    ...
    <Link to='/home'>TAP HERE</Link>
  </div>
}