-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathdocs_loading.html
More file actions
59 lines (57 loc) · 31.8 KB
/
Copy pathdocs_loading.html
File metadata and controls
59 lines (57 loc) · 31.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="en" data-vocs>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/initializeTheme.iife.js"></script><script src="https://cdn.usefathom.com/script.js" data-site="FJKRBMZB" defer=""></script><link rel="preload" as="image" href="/logo-dark.svg"/><link rel="preload" as="image" href="/logo-light.svg"/><link rel="preload" as="image" href="/ready_preview.png"/><link rel="preload" as="image" href="/splash_screen_schematic.png"/><title>Loading your app · Farcaster Mini Apps</title><meta name="description" content="Create a smooth transition between from your branded splash screen to your app"/><link rel="icon" href="/favicon.png" type="image/png"/><meta property="og:type" content="website"/><meta property="og:title" content="Loading your app"/><meta property="og:url" content="miniapps-docs-m32whkptb-farcaster.vercel.app"/><meta property="og:description" content="Create a smooth transition between from your branded splash screen to your app"/><meta property="og:image" content="https://og-five-eta.vercel.app/api/og/mini-apps?title=Loading your app&description=Create a smooth transition between from your branded splash screen to your app§ion=Guide"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/><meta name="twitter:card" content="summary_large_image"/><meta property="twitter:image" content="https://og-five-eta.vercel.app/api/og/mini-apps?title=Loading%20your%20app&description=Create%20a%20smooth%20transition%20between%20from%20your%20branded%20splash%20screen%20to%20your%20app§ion=Guide"/>
<script type="module" crossorigin src="/assets/index-CYsWK2Vp.js"></script>
<link rel="stylesheet" crossorigin href="/assets/style-QXPgyqgy.css">
</head>
<body>
<div id="app"><base href="miniapps-docs-m32whkptb-farcaster.vercel.app"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet"/><div class="vocs_DocsLayout" data-layout="docs" style="--vocs-fontFamily_default:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"><a class="vocs_SkipLink vocs_utils_visuallyHidden" href="/docs/guides/loading#vocs-content">Skip to content</a><div class="vocs_DocsLayout_gutterLeft"><aside class="vocs_Sidebar vocs_DocsLayout_sidebar"><div><div class="vocs_Sidebar_logoWrapper"><div class="vocs_Sidebar_logo"><a style="align-items:center;display:flex;height:100%" href="/" data-discover="true"><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoDark" src="/logo-dark.svg"/><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoLight" src="/logo-light.svg"/></a></div><div class="vocs_Sidebar_divider"></div></div><nav class="vocs_Sidebar_navigation"><div class="vocs_Sidebar_group"><section class="vocs_Sidebar_section vocs_Sidebar_level"><div class="vocs_Sidebar_sectionHeader"><div class="vocs_Sidebar_sectionTitle">Introduction</div></div><div class="vocs_Sidebar_items"><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/" variant="styleless" data-discover="true">Why Mini Apps?</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/getting-started" variant="styleless" data-discover="true">Getting Started</a></div></section><section class="vocs_Sidebar_section vocs_Sidebar_level"><div class="vocs_Sidebar_sectionHeader"><div class="vocs_Sidebar_sectionTitle">Guides</div></div><div class="vocs_Sidebar_items"><a data-active="true" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/loading" variant="styleless" data-discover="true">Loading your app</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/sharing" variant="styleless" data-discover="true">Sharing your app</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/wallets" variant="styleless" data-discover="true">Interacting with Ethereum wallets</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/solana" variant="styleless" data-discover="true">Interacting with Solana wallets</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/publishing" variant="styleless" data-discover="true">Publishing your app</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/discovery" variant="styleless" data-discover="true">App Discovery & Search</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/domain-migration" variant="styleless" data-discover="true">Domain migration</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/notifications" variant="styleless" data-discover="true">Sending notifications</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/auth" variant="styleless" data-discover="true">Authenticating users</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/urls" variant="styleless" data-discover="true">Universal Links</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/share-extension" variant="styleless" data-discover="true">Share Extensions</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/manifest-vs-embed" variant="styleless" data-discover="true">Manifest vs Embed Guide</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/faq" variant="styleless" data-discover="true">FAQ</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/guides/agents-checklist" variant="styleless" data-discover="true">[for AI agents and LLMs] Checklist and guidelines</a></div></section><section class="vocs_Sidebar_section vocs_Sidebar_level"><div class="vocs_Sidebar_sectionHeader"><div class="vocs_Sidebar_sectionTitle">SDK</div></div><div class="vocs_Sidebar_items"><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/changelog" variant="styleless" data-discover="true">What's New</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/context" variant="styleless" data-discover="true">Context</a><section class="vocs_Sidebar_section"><div class="vocs_Sidebar_sectionHeader"><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/quick-auth" variant="styleless" data-discover="true">Quick Auth</a><div role="button" tabindex="0"><div aria-label="toggle section" class="vocs_Icon vocs_Sidebar_sectionCollapse vocs_Sidebar_sectionCollapseActive" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Chevron Right</title><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></section><section class="vocs_Sidebar_section"><div class="vocs_Sidebar_sectionHeader" role="button" tabindex="0"><div class="vocs_Sidebar_item">Actions</div><div role="button" tabindex="0"><div aria-label="toggle section" class="vocs_Icon vocs_Sidebar_sectionCollapse vocs_Sidebar_sectionCollapseActive" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Chevron Right</title><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></section><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/haptics" variant="styleless" data-discover="true">Haptics</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/back" variant="styleless" data-discover="true">Back navigation</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/wallet" variant="styleless" data-discover="true">Ethereum wallet</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/solana" variant="styleless" data-discover="true">Solana wallet</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/detecting-capabilities" variant="styleless" data-discover="true">Detecting chains & capabilities</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/is-in-mini-app" variant="styleless" data-discover="true">Mini app detection</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/events" variant="styleless" data-discover="true">Events</a><a data-active="false" class="vocs_Sidebar_item vocs_Link vocs_Link_styleless" href="/docs/sdk/compatibility" variant="styleless" data-discover="true">Compatibility</a></div></section><section class="vocs_Sidebar_section vocs_Sidebar_level vocs_Sidebar_levelCollapsed"><div class="vocs_Sidebar_sectionHeader" role="button" tabindex="0"><div class="vocs_Sidebar_sectionTitle">Reference</div><div role="button" tabindex="0"><div aria-label="toggle section" class="vocs_Icon vocs_Sidebar_sectionCollapse vocs_Sidebar_sectionCollapseActive" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Chevron Right</title><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></div></section></div></nav></div><div class="vocs_Sidebar_footer"><div class="vocs_Sidebar_footerCurtain"></div><div class="vocs_Sidebar_footerContent"><div class="vocs_Socials"><a class="vocs_Socials_button" href="https://github.com/farcasterxyz/miniapps" target="_blank" rel="noopener noreferrer"><div aria-label="GitHub" class="vocs_Icon vocs_Socials_icon" role="img" style="--vocs_Icon_size:17px"><svg width="100%" height="100%" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"></path></svg></div></a><div style="width:1px;margin-top:var(--vocs-space_4);margin-bottom:var(--vocs-space_4);background-color:var(--vocs-color_border)"></div><a class="vocs_Socials_button" href="https://x.com/farcaster_xyz" target="_blank" rel="noopener noreferrer"><div aria-label="X (Twitter)" class="vocs_Icon vocs_Socials_icon" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="currentColor"></path></svg></div></a></div></div></div></aside></div><div class="vocs_DocsLayout_gutterTop vocs_DocsLayout_gutterTop_offsetLeftGutter"><div class="vocs_DesktopTopNav"><button class="vocs_DesktopSearch_search" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«Rlj»" data-state="closed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:2px"><path d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>Search...<div class="vocs_DesktopSearch_searchCommand"><div style="background:currentColor;transform:rotate(45deg);width:1.5px;border-radius:2px;height:100%"></div></div></button><div class="vocs_DesktopTopNav_logoWrapper"><div class="vocs_DesktopTopNav_logo"><a style="align-items:center;display:flex;height:56px;margin-top:4px" href="/" data-discover="true"><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoDark" src="/logo-dark.svg"/><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoLight" src="/logo-light.svg"/></a></div></div><div class="vocs_DesktopTopNav_section"></div><div class="vocs_DesktopTopNav_section"><div class="vocs_DesktopTopNav_group"><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="vocs_NavigationMenu"><div style="position:relative"><ul data-orientation="horizontal" class="vocs_NavigationMenu_list" dir="ltr"><a data-active="false" class="vocs_DesktopTopNav_item vocs_NavigationMenu_link vocs_Link vocs_Link_styleless" href="/blog" variant="styleless" data-radix-collection-item="" data-discover="true">Blog</a><a class="vocs_DesktopTopNav_item vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://miniapps.farcaster.xyz/llms-full.txt" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">llms.txt</a><a class="vocs_DesktopTopNav_item vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://github.com/farcasterxyz/miniapps/tree/main/examples" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">Examples</a><a class="vocs_DesktopTopNav_item vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://farcaster.xyz/~/developers/rewards" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">Rewards</a></ul></div></nav></div></div></div><div class="vocs_MobileTopNav"><div class="vocs_MobileTopNav_section"><div class="vocs_MobileTopNav_group"><div class="vocs_MobileTopNav_logo"><a style="align-items:center;display:flex;height:100%" href="/" data-discover="true"><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoDark" src="/logo-dark.svg"/><img alt="Logo" class="vocs_NavLogo_logoImage vocs_Logo vocs_Logo_logoLight" src="/logo-light.svg"/></a></div></div><div class="vocs_MobileTopNav_group"><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="vocs_MobileTopNav_navigation vocs_NavigationMenu"><div style="position:relative"><ul data-orientation="horizontal" class="vocs_NavigationMenu_list" dir="ltr"><a data-active="false" class="vocs_NavigationMenu_link vocs_Link vocs_Link_styleless" href="/blog" variant="styleless" data-radix-collection-item="" data-discover="true">Blog</a><a class="vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://miniapps.farcaster.xyz/llms-full.txt" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">llms.txt</a><a class="vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://github.com/farcasterxyz/miniapps/tree/main/examples" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">Examples</a><a class="vocs_NavigationMenu_link vocs_Link vocs_Link_styleless vocs_ExternalLink" href="https://farcaster.xyz/~/developers/rewards" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)" data-active="false" variant="styleless" data-radix-collection-item="">Rewards</a></ul></div></nav><div class="vocs_MobileTopNav_navigation vocs_MobileTopNav_navigation_compact"><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«Rkpj»" data-state="closed" class="vocs_MobileTopNav_menuTrigger vocs_MobileTopNav_navigationItem">Menu<div aria-label="Menu" class="vocs_Icon" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Chevron Down</title><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></button></div></div></div><div class="vocs_MobileTopNav_section"><div class="vocs_MobileTopNav_group" style="margin-right:-8px"><button class="vocs_MobileSearch_searchButton" type="button" aria-label="Search" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«R19j»" data-state="closed"><svg width="21" height="21" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div class="vocs_DocsLayout_gutterTopCurtain vocs_DocsLayout_gutterTopCurtain_withSidebar"><div class="vocs_DesktopTopNav_curtain"></div><div class="vocs_MobileTopNav_curtain"><div class="vocs_MobileTopNav_curtainGroup"><div class="vocs_MobileTopNav_curtainItem"><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«Rqj»" data-state="closed" class="vocs_MobileTopNav_menuTrigger"><div aria-label="Menu" class="vocs_Icon" role="img" style="--vocs_Icon_size:13px"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 48" fill="none"><title>Menu</title><path fill="currentColor" d="M19.528 47.232h40.87c1.952 0 3.515-1.562 3.515-3.564a3.5 3.5 0 0 0-3.516-3.516H19.528a3.501 3.501 0 0 0-3.515 3.516c0 2.002 1.562 3.564 3.515 3.564ZM12.057 27.262h55.81a3.501 3.501 0 0 0 3.516-3.516 3.501 3.501 0 0 0-3.515-3.515h-55.81a3.501 3.501 0 0 0-3.516 3.515 3.501 3.501 0 0 0 3.515 3.516ZM4.391 7.34H75.29c2.002 0 3.515-1.563 3.515-3.516 0-2.002-1.513-3.564-3.515-3.564H4.39C2.438.26.876 1.822.876 3.824A3.501 3.501 0 0 0 4.39 7.34Z"></path></svg></div><div class="vocs_MobileTopNav_menuTitle">Loading your app</div></button></div></div><div class="vocs_MobileTopNav_curtainGroup"><div class="vocs_MobileTopNav_curtainItem"><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«R5aj»" data-state="closed" class="vocs_MobileTopNav_outlineTrigger">On this page<div aria-label="On this page" class="vocs_Icon" role="img" style="--vocs_Icon_size:16px"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Chevron Right</title><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></button></div></div></div></div><div class="vocs_DocsLayout_gutterRight vocs_DocsLayout_gutterRight_withSidebar"></div><div id="vocs-content" class="vocs_DocsLayout_content vocs_DocsLayout_content_withSidebar vocs_DocsLayout_content_withTopNav"><article class="vocs_Content"><header class="vocs_Header"><h1 class="vocs_H1 vocs_Heading"><div id="loading-your-app" class="vocs_Heading_slugTarget"></div>Loading your app<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#loading-your-app" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h1></header>
<p class="vocs_Paragraph">When users open Mini Apps in Farcaster they are shown a branded splash screen
instead of a blank loading page like they would in a browser. Once your interface
is ready to show the splash screen can be hidden.</p>
<p class="vocs_Paragraph"><img src="/ready_preview.png" alt="calling ready to hide the splash screen"/></p>
<h2 class="vocs_H2 vocs_Heading"><div id="calling-ready" class="vocs_Heading_slugTarget"></div>Calling ready<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#calling-ready" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h2>
<p class="vocs_Paragraph">Call <a class="vocs_Anchor vocs_Link vocs_Link_accent" href="/docs/sdk/actions/ready" data-discover="true">ready</a> when your interface is ready to be displayed:</p>
<h3 class="vocs_H3 vocs_Heading"><div id="in-react-applications" class="vocs_Heading_slugTarget"></div>In React applications<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#in-react-applications" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h3>
<p class="vocs_Paragraph">If you're using React, call <code class="vocs_Code">ready</code> inside a <code class="vocs_Code">useEffect</code> hook to prevent it from running on every re-render:</p>
<strong class="vocs_Strong">You should call ready as soon as possible while avoiding jitter and content
reflows.</strong>
<p class="vocs_Paragraph">Minimize loading time for your app by following web performance best practices:</p>
<ul class="vocs_List vocs_List_unordered">
<li class="vocs_ListItem"><a class="vocs_Anchor vocs_Link vocs_Link_accent" href="https://web.dev/learn/performance" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)">Learn about web performance</a></li>
<li class="vocs_ListItem"><a class="vocs_Anchor vocs_Link vocs_Link_accent" href="https://pagespeed.web.dev/analysis/https-pagespeed-web-dev/bywca5kqd1?form_factor=mobile" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)">Test your app's speed and diagnose performance issues</a></li>
</ul>
<br/>
<p class="vocs_Paragraph">To avoid jitter and content reflowing:</p>
<ul class="vocs_List vocs_List_unordered">
<li class="vocs_ListItem">Don't call ready until your interface has loaded</li>
<li class="vocs_ListItem">Use placeholders and skeleton states if additional loading is required</li>
</ul>
<p class="vocs_Paragraph"><a class="vocs_Anchor vocs_Link vocs_Link_accent" href="/docs/guides/agents-checklist" data-discover="true">If you're an AI agent or LLM, please read this.</a></p>
<h3 class="vocs_H3 vocs_Heading"><div id="disabling-native-gestures" class="vocs_Heading_slugTarget"></div>Disabling native gestures<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#disabling-native-gestures" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h3>
<p class="vocs_Paragraph">Mini Apps are rendered in modal elements where certain swipe gestures or clicks
outside the app surface will result in the app closing. If your app has conflicting
gestures you can set the <code class="vocs_Code">disableNativeGestures</code> flag to disable native gestures.</p>
<h2 class="vocs_H2 vocs_Heading"><div id="splash-screen" class="vocs_Heading_slugTarget"></div>Splash Screen<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#splash-screen" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h2>
<p class="vocs_Paragraph">When a user launches your app they will see a Splash Screen while your app loads.</p>
<p class="vocs_Paragraph"><img src="/splash_screen_schematic.png" alt="splash screen schematic"/></p>
<p class="vocs_Paragraph">You'll learn how to configure the Splash Screen in the <a class="vocs_Anchor vocs_Link vocs_Link_accent" href="/docs/guides/sharing" data-discover="true">sharing your
app</a> and <a class="vocs_Anchor vocs_Link vocs_Link_accent" href="/docs/guides/publishing" data-discover="true">publishing your app</a>
guides.</p>
<h2 class="vocs_H2 vocs_Heading"><div id="previewing-your-app" class="vocs_Heading_slugTarget"></div>Previewing your app<a class="vocs_Anchor vocs_Autolink" aria-hidden="true" tabindex="-1" href="/docs/guides/loading#previewing-your-app" data-discover="true"><div data-autolink-icon="true" class="vocs_Div vocs_AutolinkIcon" style="--vocs_AutolinkIcon_iconUrl:url(/.vocs/icons/link.svg)"></div></a></h2>
<p class="vocs_Paragraph">This app doesn't do anything interesting yet but we've now done the bare
minimum to preview it inside a Farcaster client.</p>
<p class="vocs_Paragraph">Let's preview it in Warpcast:</p>
<ol class="vocs_List vocs_List_ordered">
<li class="vocs_ListItem">Open the <a class="vocs_Anchor vocs_Link vocs_Link_accent" href="https://farcaster.xyz/~/developers/mini-apps/debug" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)">Mini App Debug Tool</a>
on desktop</li>
<li class="vocs_ListItem">Enter your app url</li>
<li class="vocs_ListItem">Hit <em>Preview</em></li>
</ol>
<aside class="vocs_Aside vocs_Callout vocs_Callout_info"><div class="vocs_Callout_icon"><svg width="100%" height="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Info</title><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div><div class="vocs_Callout_content"><p class="vocs_Paragraph">You must be logged into your Warpcast account on desktop to access the Mini App Debug Tool.</p></div></aside>
<p class="vocs_Paragraph"><a class="vocs_Anchor vocs_Link vocs_Link_accent" href="/docs/guides/agents-checklist" data-discover="true">If you're an AI agent or LLM, please read this.</a></p></article><footer class="vocs_Footer" data-layout="docs"><div class="vocs_Footer_container"><div><a class="vocs_Footer_editLink vocs_Link vocs_Link_accent" href="https://github.com/farcasterxyz/miniapps/edit/main/site/pages/docs/guides/loading.mdx" target="_blank" rel="noopener noreferrer" style="--vocs_ExternalLink_iconUrl:url(/.vocs/icons/arrow-diagonal.svg)"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1464 1.14645C12.3417 0.951184 12.6583 0.951184 12.8535 1.14645L14.8535 3.14645C15.0488 3.34171 15.0488 3.65829 14.8535 3.85355L10.9109 7.79618C10.8349 7.87218 10.7471 7.93543 10.651 7.9835L6.72359 9.94721C6.53109 10.0435 6.29861 10.0057 6.14643 9.85355C5.99425 9.70137 5.95652 9.46889 6.05277 9.27639L8.01648 5.34897C8.06455 5.25283 8.1278 5.16507 8.2038 5.08907L12.1464 1.14645ZM12.5 2.20711L8.91091 5.79618L7.87266 7.87267L8.12731 8.12732L10.2038 7.08907L13.7929 3.5L12.5 2.20711ZM9.99998 2L8.99998 3H4.9C4.47171 3 4.18056 3.00039 3.95552 3.01877C3.73631 3.03668 3.62421 3.06915 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3.06915 3.62421 3.03669 3.73631 3.01878 3.95552C3.00039 4.18056 3 4.47171 3 4.9V11.1C3 11.5283 3.00039 11.8194 3.01878 12.0445C3.03669 12.2637 3.06915 12.3758 3.10899 12.454C3.20487 12.6422 3.35785 12.7951 3.54601 12.891C3.62421 12.9309 3.73631 12.9633 3.95552 12.9812C4.18056 12.9996 4.47171 13 4.9 13H11.1C11.5283 13 11.8194 12.9996 12.0445 12.9812C12.2637 12.9633 12.3758 12.9309 12.454 12.891C12.6422 12.7951 12.7951 12.6422 12.891 12.454C12.9309 12.3758 12.9633 12.2637 12.9812 12.0445C12.9996 11.8194 13 11.5283 13 11.1V6.99998L14 5.99998V11.1V11.1207C14 11.5231 14 11.8553 13.9779 12.1259C13.9549 12.407 13.9057 12.6653 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.6653 13.9057 12.407 13.9549 12.1259 13.9779C11.8553 14 11.5231 14 11.1207 14H11.1H4.9H4.87934C4.47686 14 4.14468 14 3.87409 13.9779C3.59304 13.9549 3.33469 13.9057 3.09202 13.782C2.7157 13.5903 2.40973 13.2843 2.21799 12.908C2.09434 12.6653 2.04506 12.407 2.0221 12.1259C1.99999 11.8553 1.99999 11.5231 2 11.1207V11.1206V11.1V4.9V4.87935V4.87932V4.87931C1.99999 4.47685 1.99999 4.14468 2.0221 3.87409C2.04506 3.59304 2.09434 3.33469 2.21799 3.09202C2.40973 2.71569 2.7157 2.40973 3.09202 2.21799C3.33469 2.09434 3.59304 2.04506 3.87409 2.0221C4.14468 1.99999 4.47685 1.99999 4.87932 2H4.87935H4.9H9.99998Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg> <!-- -->Edit on GitHub</a></div></div></footer></div><div data-bottom-observer="true"></div></div></div>
</body>
</html>