Project created using:
> framework7 create
> pwa -> svelte -> tabs view
Problem:
In my app I need to show different pages based on some conditions. I am changing the whole based on user login state or loading state.
For example, Here I am using loading to show different views. (Please follow 
for my modifications). The Panel is not opening with panelOpen=“left” after the loading becomes false after timeout. When I click on the panelopen button it logs error as undefined is not an object - panel is undefined.
Please help me fix this error. Here is the code @nolimits4web
<script>
import { onMount } from "svelte";
import {
App,
Panel,
Views,
View,
Page,
Navbar,
Toolbar,
Link,
Block,
} from "framework7-svelte";
import routes from "../js/routes";
//➡️
let loading = true;
let f7params = {
name: "My App", // App name
routes: routes,
serviceWorker:
process.env.NODE_ENV === "production"
? {
path: "/service-worker.js",
}
: {},
};
onMount(() => {
//➡️
setTimeout(() => {
loading = false;
}, 3000);
});
</script>
<!-- ➡️ -->
{#if loading}
<App {...f7params}>
<View main url="/404" />
</App>
{:else}
<App {...f7params}>
<!-- ➡️ -->
<Panel left cover dark>
<View>
<Page>
<Navbar title="Left Panel" />
<Block>Left panel content goes here</Block>
</Page>
</View>
</Panel>
<Views tabs class="safe-areas">
<Toolbar tabbar icons bottom>
<Link
tabLink="#view-home"
tabLinkActive
iconIos="f7:house_fill"
iconMd="material:home"
text="Home"
/>
<Link
tabLink="#view-catalog"
iconIos="f7:square_list_fill"
iconMd="material:view_list"
text="Catalog"
/>
<Link
tabLink="#view-settings"
iconIos="f7:gear"
iconMd="material:settings"
text="Settings"
/>
</Toolbar>
<View id="view-home" main tab tabActive url="/" />
<View id="view-catalog" name="catalog" tab url="/catalog/" />
<View id="view-settings" name="settings" tab url="/settings/" />
</Views>
</App>
{/if}