How to use a Framer hosted web page as your loading screen
Here is some code to help you get started.
There is a great medium article I used to use a custom loading screen from writing some custom html in my index.html file, but then I got to thinking "it would be way better to just show a page made in framer so I can add cool animations and update it".
So here is the code, I took it a bit further by using a stub to inject a function into my main.dart that notifies my index.html when the app is ready so I can fade out the loading screen and reduce as much jank as possible with the awful flutter first load ( a flutter issue not ff).
I am also checking for dev (debug) vs live site so I can show my staged framer site vs live site while testing or making updates.
I am using url query params to show different pages, after stripe subscribe is successful I redirect back to my app and show a success loading screen.
The best part of this is I host my paywall on framer then use query params to pass in a stripe checkout link, this gets captured by my subscribe button using some custom react code in framer. Doing this allowed me to make a really nice and dynamic paywall that is mobile and desktop friendly, easily updated, and I reduce all my waiting times to near 0s during onboarding.
<link rel="manifest" href="manifest.json" />
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
<!-- CUSTOM CODE: start for web loading -->
<script>
// Function to determine if the app is in debug mode
function isDevMode() {
// You can customize this logic based on your needs
// For example, you might check the hostname or a specific query parameter
return (
window.location.hostname === 'localhost' ||
window.location.hostname === 'XXXXX' || // REMOVED CODE EXAMPLE
window.location.search.includes('debug=true')
);
}
// Set a global variable for the base URL based on the debug mode
framerDomain = isDevMode()
? 'https://XXXXXXXX' // REMOVED CODE EXAMPLE
: 'https://XXXXXXXX'; // REMOVED CODE EXAMPLE
</script>
<script>
// Function to handle app loaded notification
function appLoaded() {
const loadingFrame = document.getElementById('loading_frame');
loadingFrame.classList.add('fade-out');
setTimeout(() => {
loadingFrame.remove(); // Completely remove the iframe from the DOM
}, 500); // Match the duration of the CSS transition
}
// Set the iframe src based on the loader parameter
window.addEventListener('DOMContentLoaded', (event) => {
const urlParams = new URLSearchParams(window.location.search);
const loaderParam = urlParams.get('stripe');
const loadingFrame = document.getElementById('loading_frame');
if (loaderParam === 'success') {
loadingFrame.src = `${framerDomain}/app/success`;
} else {
loadingFrame.src = `${framerDomain}/app/loading`;
}
});
</script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--background-color);
}
#loading_frame {
width: 100vw;
height: 100vh;
border: none;
position: absolute;
top: 0;
left: 0;
transition: opacity 500ms ease-in-out;
z-index: 10;
background: transparent;
}
#loading_frame.fade-out {
opacity: 0;
pointer-events: none;
}
</style>
<script>
// Function to set the background color based on system theme
function setBackgroundColor() {
const prefersDarkScheme = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
document.body.style.setProperty(
'--background-color',
prefersDarkScheme ? '#000000' : '#ffffff'
);
}
// Set the background color on page load
window.addEventListener('DOMContentLoaded', setBackgroundColor);
</script>
</head>
<body>
<iframe id="loading_frame" src="https://www.logeat.io/app/loading"></iframe>
<!-- CUSTOM CODE end: for web loading -->
<!-- flutterflow code for loading the app -->
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
entrypointUrl: 'main.dart.js',