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/messages/pages/messages.tsx
View File

@ -3,13 +3,14 @@ import type { BlitzPage } from "blitz";
import { Routes, dynamic } from "blitz";
import { atom, useAtom } from "jotai";
import Layout from "app/core/layouts/layout";
import AppLayout from "app/core/layouts/layout";
import ConversationsList from "../components/conversations-list";
import NewMessageButton from "../components/new-message-button";
import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials";
import useNotifications from "app/core/hooks/use-notifications";
import useCurrentUser from "app/core/hooks/use-current-user";
import PageTitle from "../../core/components/page-title";
import Spinner from "../../core/components/spinner";
const Messages: BlitzPage = () => {
const { hasFilledTwilioCredentials, hasPhoneNumber } = useCurrentUser();
@ -26,7 +27,7 @@ const Messages: BlitzPage = () => {
return (
<>
<MissingTwilioCredentials />
<PageTitle className="filter blur-sm absolute top-0" title="Messages" />
<PageTitle className="filter blur-sm select-none absolute top-0" title="Messages" />
</>
);
}
@ -35,7 +36,8 @@ const Messages: BlitzPage = () => {
<>
<PageTitle title="Messages" />
<section className="flex flex-grow flex-col">
<Suspense fallback="Loading...">
<Suspense fallback={<Spinner />}>
{/* TODO: skeleton conversations list */}
<ConversationsList />
</Suspense>
</section>
@ -52,7 +54,7 @@ const NewMessageBottomSheet = dynamic(() => import("../components/new-message-bo
export const bottomSheetOpenAtom = atom(false);
Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
Messages.getLayout = (page) => <AppLayout title="Messages">{page}</AppLayout>;
Messages.authenticate = { redirectTo: Routes.SignIn().pathname };

6
app/messages/pages/messages/[recipient].tsx
View File

@ -3,7 +3,7 @@ import type { BlitzPage } from "blitz";
import { Routes, useRouter } from "blitz";
import { IoChevronBack, IoInformationCircle, IoCall } from "react-icons/io5";
import Layout from "../../../core/layouts/layout";
import AppLayout from "../../../core/layouts/layout";
import Conversation from "../../components/conversation";
import useConversation from "../../hooks/use-conversation";
@ -14,7 +14,7 @@ const ConversationPage: BlitzPage = () => {
const conversation = useConversation(recipient)[0];
return (
<Layout title={pageTitle} hideFooter>
<AppLayout title={pageTitle} hideFooter>
<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
<IoChevronBack className="h-8 w-8" />
@ -28,7 +28,7 @@ const ConversationPage: BlitzPage = () => {
<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>
<Conversation />
</Suspense>
</Layout>
</AppLayout>
);
};