mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve loading states:

Browse Source 
* app loader
 * specific loaders with spinner
This commit is contained in:
m5r
2021-10-18 00:06:45 +02:00
parent 29101b1daf
commit 931384b468
18 changed files with 867 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/phone-calls/pages/calls.tsx
View File

@ -2,11 +2,12 @@ import { Suspense } from "react";
import type { BlitzPage } from "blitz";
import { Routes } from "blitz";
import Layout from "app/core/layouts/layout";
import AppLayout from "app/core/layouts/layout";
import PhoneCallsList from "../components/phone-calls-list";
import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials";
import useCurrentUser from "app/core/hooks/use-current-user";
import PageTitle from "../../core/components/page-title";
import Spinner from "../../core/components/spinner";
const PhoneCalls: BlitzPage = () => {
const { hasFilledTwilioCredentials, hasPhoneNumber } = useCurrentUser();
@ -15,7 +16,7 @@ const PhoneCalls: BlitzPage = () => {
return (
<>
<MissingTwilioCredentials />
<PageTitle className="filter blur-sm absolute top-0" title="Calls" />
<PageTitle className="filter blur-sm select-none absolute top-0" title="Calls" />
</>
);
}
@ -24,7 +25,8 @@ const PhoneCalls: BlitzPage = () => {
<>
<PageTitle className="pl-12" title="Calls" />
<section className="flex flex-grow flex-col">
<Suspense fallback="Loading...">
<Suspense fallback={<Spinner />}>
{/* TODO: skeleton phone calls list */}
<PhoneCallsList />
</Suspense>
</section>
@ -32,7 +34,7 @@ const PhoneCalls: BlitzPage = () => {
);
};
PhoneCalls.getLayout = (page) => <Layout title="Calls">{page}</Layout>;
PhoneCalls.getLayout = (page) => <AppLayout title="Calls">{page}</AppLayout>;
PhoneCalls.authenticate = { redirectTo: Routes.SignIn() };

4
app/phone-calls/pages/keypad.tsx
View File

@ -7,7 +7,7 @@ import { Transition } from "@headlessui/react";
import { IoBackspace, IoCall } from "react-icons/io5";
import { Direction } from "db";
import Layout from "app/core/layouts/layout";
import AppLayout from "app/core/layouts/layout";
import Keypad from "../components/keypad";
import usePhoneCalls from "../hooks/use-phone-calls";
import useKeyPress from "../hooks/use-key-press";
@ -161,7 +161,7 @@ const pressBackspaceAtom = atom(null, (get, set) => {
set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
});
KeypadPage.getLayout = (page) => <Layout title="Keypad">{page}</Layout>;
KeypadPage.getLayout = (page) => <AppLayout title="Keypad">{page}</AppLayout>;
KeypadPage.authenticate = { redirectTo: Routes.SignIn() };