Skip to content

Commit a1de3c5

Browse files
cprussincprussin
committed
wip: add nextjs loading state
1 parent 42a7dd2 commit a1de3c5

File tree

7 files changed

+114
-85
lines changed

7 files changed

+114
-85
lines changed

‎apps/insights/src/app/price-feeds/layout.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type { Metadata } from "next";
2+
import type { ReactNode } from "react";
23

3-
export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
4+
const Layout = ({ children }: { children: ReactNode }) => children;
5+
export default Layout;
6+
// export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
47

58
export const metadata: Metadata = {
69
title: {

‎apps/insights/src/app/publishers/[cluster]/[key]/price-feeds/loading.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { PriceFeedsLoading as default } from "../../../../../components/Publisher/price-feeds-loading";

‎apps/insights/src/app/publishers/layout.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type { Metadata } from "next";
2+
import type { ReactNode } from "react";
23

3-
export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
4+
const Layout = ({ children }: { children: ReactNode }) => children;
5+
export default Layout;
6+
// export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
47

58
export const metadata: Metadata = {
69
title: {

‎apps/insights/src/components/PriceComponentsCard/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -347,11 +347,9 @@ export const PriceComponentsCardContents = <
347347
title={
348348
<>
349349
<span>{label}</span>
350-
{!props.isLoading && (
351-
<Badge style="filled" variant="neutral" size="md">
352-
{props.numResults}
353-
</Badge>
354-
)}
350+
<Badge style="filled" variant="neutral" size="md">
351+
{!props.isLoading && props.numResults}
352+
</Badge>
355353
</>
356354
}
357355
toolbar={

‎apps/insights/src/components/Publisher/price-feeds-loading.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import { PriceComponentsCardContents } from "../PriceComponentsCard";
4+
import { PriceFeedTag } from "../PriceFeedTag";
5+
6+
export const PriceFeedsLoading = () => (
7+
<PriceComponentsCardContents
8+
label="Price Feeds"
9+
searchPlaceholder="Feed symbol"
10+
nameLoadingSkeleton={<PriceFeedTag compact isLoading />}
11+
isLoading
12+
extraColumns={[
13+
{
14+
id: "assetClass",
15+
name: "ASSET CLASS",
16+
alignment: "left",
17+
allowsSorting: true,
18+
},
19+
]}
20+
nameWidth={90}
21+
/>
22+
);

‎apps/insights/src/components/Root/tabs.tsx

+42-41
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
import { useSelectedLayoutSegment, usePathname } from "next/navigation";
99
import type { ComponentProps } from "react";
1010

11-
import type { VariantArg } from "../LayoutTransition";
12-
import { LayoutTransition } from "../LayoutTransition";
11+
// import type { VariantArg } from "../LayoutTransition";
12+
// import { LayoutTransition } from "../LayoutTransition";
1313

1414
export const TabRoot = (
1515
props: Omit<ComponentProps<typeof Tabs>, "selectedKey">,
@@ -27,46 +27,47 @@ export const MainNavTabs = (
2727
return <MainNavTabsComponent pathname={pathname} {...props} />;
2828
};
2929

30-
export const TabPanel = ({
31-
children,
32-
...props
33-
}: Omit<ComponentProps<typeof UnstyledTabPanel>, "id">) => {
30+
export const TabPanel = (
31+
props: Omit<ComponentProps<typeof UnstyledTabPanel>, "id">,
32+
) => {
3433
const tabId = useSelectedLayoutSegment() ?? "";
3534

36-
return (
37-
<UnstyledTabPanel key="tabpanel" id={tabId} {...props}>
38-
{(args) => (
39-
<LayoutTransition
40-
variants={{
41-
initial: (custom) => ({
42-
opacity: 0,
43-
x: isMovingLeft(custom) ? "-2%" : "2%",
44-
}),
45-
exit: (custom) => ({
46-
opacity: 0,
47-
x: isMovingLeft(custom) ? "2%" : "-2%",
48-
transition: {
49-
x: { type: "spring", bounce: 0 },
50-
},
51-
}),
52-
}}
53-
initial="initial"
54-
animate={{
55-
opacity: 1,
56-
x: 0,
57-
transition: {
58-
x: { type: "spring", bounce: 0 },
59-
},
60-
}}
61-
exit="exit"
62-
>
63-
{typeof children === "function" ? children(args) : children}
64-
</LayoutTransition>
65-
)}
66-
</UnstyledTabPanel>
67-
);
35+
return <UnstyledTabPanel key="tabpanel" id={tabId} {...props} />;
36+
37+
// return (
38+
// <UnstyledTabPanel key="tabpanel" id={tabId} {...props}>
39+
// {(args) => (
40+
// <LayoutTransition
41+
// variants={{
42+
// initial: (custom) => ({
43+
// opacity: 0,
44+
// x: isMovingLeft(custom) ? "-2%" : "2%",
45+
// }),
46+
// exit: (custom) => ({
47+
// opacity: 0,
48+
// x: isMovingLeft(custom) ? "2%" : "-2%",
49+
// transition: {
50+
// x: { type: "spring", bounce: 0 },
51+
// },
52+
// }),
53+
// }}
54+
// initial="initial"
55+
// animate={{
56+
// opacity: 1,
57+
// x: 0,
58+
// transition: {
59+
// x: { type: "spring", bounce: 0 },
60+
// },
61+
// }}
62+
// exit="exit"
63+
// >
64+
// {typeof children === "function" ? children(args) : children}
65+
// </LayoutTransition>
66+
// )}
67+
// </UnstyledTabPanel>
68+
// );
6869
};
6970

70-
const isMovingLeft = ({ segment, prevSegment }: VariantArg): boolean =>
71-
segment === null ||
72-
(segment === "publishers" && prevSegment === "price-feeds");
71+
// const isMovingLeft = ({ segment, prevSegment }: VariantArg): boolean =>
72+
// segment === null ||
73+
// (segment === "publishers" && prevSegment === "price-feeds");

‎apps/insights/src/components/Tabs/index.tsx

+38-37
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useSelectedLayoutSegment, usePathname } from "next/navigation";
99
import type { ComponentProps } from "react";
1010
import { useMemo } from "react";
1111

12-
import { LayoutTransition } from "../LayoutTransition";
12+
// import { LayoutTransition } from "../LayoutTransition";
1313

1414
export const TabRoot = (
1515
props: Omit<ComponentProps<typeof UnstyledTabs>, "selectedKey">,
@@ -44,42 +44,43 @@ export const Tabs = ({ prefix, items, ...props }: TabsProps) => {
4444
return <TabList pathname={pathname} items={mappedItems} {...props} />;
4545
};
4646

47-
export const TabPanel = ({
48-
children,
49-
...props
50-
}: Omit<ComponentProps<typeof UnstyledTabPanel>, "id">) => {
47+
export const TabPanel = (
48+
props: Omit<ComponentProps<typeof UnstyledTabPanel>, "id">,
49+
) => {
5150
const tabId = useSelectedLayoutSegment() ?? "";
5251

53-
return (
54-
<UnstyledTabPanel key="tabpanel" id={tabId} {...props}>
55-
{(args) => (
56-
<LayoutTransition
57-
variants={{
58-
initial: ({ segment }) => ({
59-
opacity: 0,
60-
x: segment === null ? "-2%" : "2%",
61-
}),
62-
exit: ({ segment }) => ({
63-
opacity: 0,
64-
x: segment === null ? "2%" : "-2%",
65-
transition: {
66-
x: { type: "spring", bounce: 0 },
67-
},
68-
}),
69-
}}
70-
initial="initial"
71-
animate={{
72-
opacity: 1,
73-
x: 0,
74-
transition: {
75-
x: { type: "spring", bounce: 0 },
76-
},
77-
}}
78-
exit="exit"
79-
>
80-
{typeof children === "function" ? children(args) : children}
81-
</LayoutTransition>
82-
)}
83-
</UnstyledTabPanel>
84-
);
52+
return <UnstyledTabPanel key="tabpanel" id={tabId} {...props} />;
53+
54+
// return (
55+
// <UnstyledTabPanel key="tabpanel" id={tabId} {...props}>
56+
// {(args) => (
57+
// <LayoutTransition
58+
// variants={{
59+
// initial: ({ segment }) => ({
60+
// opacity: 0,
61+
// x: segment === null ? "-2%" : "2%",
62+
// }),
63+
// exit: ({ segment }) => ({
64+
// opacity: 0,
65+
// x: segment === null ? "2%" : "-2%",
66+
// transition: {
67+
// x: { type: "spring", bounce: 0 },
68+
// },
69+
// }),
70+
// }}
71+
// initial="initial"
72+
// animate={{
73+
// opacity: 1,
74+
// x: 0,
75+
// transition: {
76+
// x: { type: "spring", bounce: 0 },
77+
// },
78+
// }}
79+
// exit="exit"
80+
// >
81+
// {typeof children === "function" ? children(args) : children}
82+
// </LayoutTransition>
83+
// )}
84+
// </UnstyledTabPanel>
85+
// );
8586
};

0 commit comments

Comments
 (0)