Skip to content

Commit

Permalink
more experimentation
Browse files Browse the repository at this point in the history
  • Loading branch information
ichub committed Jul 24, 2024
1 parent 092a742 commit bc76ffb
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -167,9 +167,7 @@ export function HomeScreenImpl(): JSX.Element | null {
<AppContainer bg="gray">
<Spacer h={24} />
<AppHeader isEdgeCity={isEdgeCity} />
<Spacer h={24} />
<Placeholder minH={540}>
<LoadingIssuedPCDs />
{/* {isRoot && (
<div className="font-bold text-3xl mb-4 text-center">My Events</div>
)} */}
Expand Down Expand Up @@ -226,7 +224,7 @@ export function HomeScreenImpl(): JSX.Element | null {
<EdgeCityHome />
) : (
<>
{!(foldersInFolder.length === 0 && isRoot) && <Separator />}
{/* {!(foldersInFolder.length === 0 && isRoot) && <Separator />} */}
{pcdsInFolder.length > 0 ? (
<PCDCardList
allExpanded
Expand All @@ -251,9 +249,11 @@ export function HomeScreenImpl(): JSX.Element | null {
</RemoveAllContainer>
</>
)} */}
<LoadingIssuedPCDs />
</>
)}
</Placeholder>

<Spacer h={24} />
</AppContainer>
</>
Expand Down
39 changes: 26 additions & 13 deletions apps/passport-client/components/shared/AppHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { CircleButton } from "@pcd/passport-ui";
import React, { useCallback } from "react";
import { IoMdSettings } from "react-icons/io";
import { MdInfo } from "react-icons/md";
import styled from "styled-components";
import { useDispatch, useSelf, useSubscriptions } from "../../src/appHooks";
import { AppState } from "../../src/state";
import { cn } from "../../src/util";

export const AppHeader = React.memo(AppHeaderImpl);

Expand Down Expand Up @@ -51,9 +49,6 @@ function AppHeaderImpl({

return (
<AppHeaderWrap>
<CircleButton diameter={34} padding={8} onClick={openInfo}>
<MdInfo size={34} color={isEdgeCity ? "white" : "var(--accent-lite)"} />
</CircleButton>
{children}
{!isProveOrAddScreen && (
<>
Expand All @@ -76,13 +71,30 @@ function AppHeaderImpl({
</CircleButton> */}
</>
)}

<CircleButton diameter={34} padding={8} onClick={openSettings}>
<IoMdSettings
size={34}
color={isEdgeCity ? "white" : "var(--accent-lite)"}
/>
</CircleButton>
<div className="flex flex-row gap-2 w-full">
<div
className={cn(
"flex flex-row justify-center items-center flex-grow text-center",
"bg-blue-700 py-2 px-4 cursor-pointer hover:bg-blue-600 transition-all duration-100",
"rounded font-bold shadow-lg select-none active:ring-2 active:ring-offset-4 active:ring-white ring-opacity-60 ring-offset-[#19473f]",
"border-none text-lg"
)}
onClick={openInfo}
>
More Info
</div>
<div
className={cn(
"flex flex-row justify-center items-center flex-grow text-center",
"bg-blue-700 py-2 px-4 cursor-pointer hover:bg-blue-600 transition-all duration-100",
"rounded font-bold shadow-lg select-none active:ring-2 active:ring-offset-4 active:ring-white ring-opacity-60 ring-offset-[#19473f]",
"border-none text-lg"
)}
onClick={openSettings}
>
Settings
</div>
</div>
</AppHeaderWrap>
);
}
Expand All @@ -94,6 +106,7 @@ const AppHeaderWrap = styled.div`
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 0.75rem;
`;

const ErrorDot = styled.div`
Expand Down
40 changes: 25 additions & 15 deletions apps/passport-client/components/shared/LoadingIssuedPCDs.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
import { useEffect, useState } from "react";
import styled from "styled-components";
import { useLoadedIssuedPCDs } from "../../src/appHooks";
import { RippleLoader } from "../core/RippleLoader";

export function LoadingIssuedPCDs(): JSX.Element | null {
const loadedIssuedPCDs = useLoadedIssuedPCDs();
const [showing, setShowing] = useState(!loadedIssuedPCDs);

if (loadedIssuedPCDs) {
useEffect(() => {
if (loadedIssuedPCDs && showing) {
setTimeout(() => {
// setShowing(false);
}, 1000);
}
}, [loadedIssuedPCDs, showing]);

if (!showing) {
return null;
}

return (
<Container>
<LoaderContainer>
<RippleLoader />
</LoaderContainer>
Loading Tickets
<Container className="w-full rounded bg-gray-500 py-2 px-4 text-white text-lg font-bold mt-[0.75rem]">
<div>Loading Tickets</div>
</Container>
);
}

const Container = styled.div`
user-select: none;
margin: 12px 9px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 16px;
`;
animation: fade 500ms ease-in-out infinite;
const LoaderContainer = styled.div`
display: inline-block;
transform: scale(50%);
@keyframes fade {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
`;

0 comments on commit bc76ffb

Please sign in to comment.