Skip to content

Commit

Permalink
refactor lemon skeleton height handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@thmsobrmlr
thmsobrmlr committed Nov 15, 2023
1 parent a73329e commit 1e0294d
Show file tree
Hide file tree
Showing 21 changed files with 35 additions and 49 deletions.
2 changes: 1 addition & 1 deletion frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ interface HereProps {
function Here({ breadcrumb }: HereProps): JSX.Element {
return (
<h1 className="Breadcrumbs3000__here">
<span>{breadcrumb.name || <LemonSkeleton className="w-40" />}</span>
<span>{breadcrumb.name || <LemonSkeleton className="w-40 h-4" />}</span>
</h1>
)
}
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ActivityLog/ActivityLog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const SkeletonLog = (): JSX.Element => {
<div className="activity-log-row items-start">
<LemonSkeleton.Circle />
<div className="details space-y-4 mt-2">
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton />
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/lib/components/CommandBar/SearchResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ const SearchResult = ({ result, resultIndex, focused, keyboardFocused }: SearchR
export const SearchResultSkeleton = (): JSX.Element => (
<div className="w-full pl-3 pr-2 bg-secondary-3000 border-b">
<div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
<LemonSkeleton className="w-32 opacity-75" height={3} />
<LemonSkeleton className="w-80" />
<LemonSkeleton className="w-100 opacity-75" height={3} />
<LemonSkeleton className="w-32 opacity-75 h-3" />
<LemonSkeleton className="w-80 h-4" />
<LemonSkeleton className="w-100 opacity-75 h-3" />
</div>
</div>
)
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,11 @@ export function EditSubscription({
{!subscription ? (
subscriptionLoading ? (
<div className="space-y-4">
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton.Row />
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton.Row />
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton.Row />
</div>
) : (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function ManageSubscriptions({
<LemonModal.Content>
{subscriptionsLoading && !subscriptions.length ? (
<div className="space-y-2">
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton.Row repeat={2} />
</div>
) : subscriptions.length ? (
Expand Down
18 changes: 2 additions & 16 deletions frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,15 @@ import './LemonSkeleton.scss'

export interface LemonSkeletonProps {
className?: string
/** Height of the skeleton bar */
height?: number
/** Repeat this component this many of times */
repeat?: number
/** Used in combination with repeat to progressively fade out the repeated skeletons */
fade?: boolean
active?: boolean
}
export function LemonSkeleton({
className,
repeat,
height = 4,
active = true,
fade = false,
}: LemonSkeletonProps): JSX.Element {
export function LemonSkeleton({ className, repeat, active = true, fade = false }: LemonSkeletonProps): JSX.Element {
const content = (
<div
className={clsx(
`LemonSkeleton rounded h-${height}`,
!active && 'LemonSkeleton--static',
className || 'w-full'
)}
>
<div className={clsx('LemonSkeleton rounded', !active && 'LemonSkeleton--static', className || 'h-4 w-full')}>
{/* The span is for accessibility, but also because @storybook/test-runner smoke tests require content */}
<span>Loading…</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/apps/ErrorDetailsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function ErrorDetailsModal(): JSX.Element {
footer={
<div className="flex items-center justify-end gap-1 h-">
{errorDetailsLoading ? (
<LemonSkeleton className="1-10" />
<LemonSkeleton className="h-10" />
) : (
<>
<span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/apps/MetricsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function MetricsOverview({
exportFailureReason,
}: MetricsOverviewProps): JSX.Element {
if (metricsLoading) {
return <LemonSkeleton className="w-20 mb-2" repeat={4} />
return <LemonSkeleton className="w-20 h-4 mb-2" repeat={4} />
}

return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/batch_exports/BatchExportScene.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@ export function BatchExportScene(): JSX.Element {
</div>
</>
) : (
<LemonSkeleton className="w-10" />
<LemonSkeleton className="w-10 h-4" />
)}
</div>

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/scenes/experiments/Experiment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -855,10 +855,10 @@ export function ResultsTag(): JSX.Element {
export function LoadingState(): JSX.Element {
return (
<div className="space-y-4">
<LemonSkeleton className="w-1/3" />
<LemonSkeleton className="w-1/3 h-4" />
<LemonSkeleton />
<LemonSkeleton />
<LemonSkeleton className="w-2/3" />
<LemonSkeleton className="w-2/3 h-4" />
</div>
)
}
4 changes: 2 additions & 2 deletions frontend/src/scenes/ingestion/panels/BillingPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function BillingPanel(): JSX.Element {
<CardContainer>
<div className="space-y-4" style={{ width: 550 }}>
<LemonSkeleton className="w-full h-10" />
<LemonSkeleton className="w-full" />
<LemonSkeleton className="w-full" />
<LemonSkeleton className="w-full h-4" />
<LemonSkeleton className="w-full h-4" />
<div className="h-20" />
<div className="h-20" />
<LemonSkeleton className="w-full h-10" />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/scenes/insights/InsightSkeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ export function InsightSkeleton(): JSX.Element {
return (
<>
<div className="my-6 space-y-4">
<LemonSkeleton className="w-1/4" />
<LemonSkeleton className="w-1/2" repeat={3} />
<LemonSkeleton className="w-1/4 h-4" />
<LemonSkeleton className="w-1/2 h-4" repeat={3} />
<LemonSkeleton />
<div className="border rounded p-6 flex items-center gap-4">
<div className="flex-1 space-y-2">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodePersonAttribute
)
})
) : (
<LemonSkeleton className="w-18 my-1" />
<LemonSkeleton className="h-4 w-18 my-1" />
)}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/project-homepage/ProjectHomepage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function ProjectHomepage(): JSX.Element {
<>
<div className="homepage-dashboard-header">
<div className="dashboard-title-container">
{!dashboard && <LemonSkeleton className="w-20" />}
{!dashboard && <LemonSkeleton className="w-20 h-4" />}
{dashboard?.name && (
<>
<IconCottage className="mr-2 text-warning text-2xl" />
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function PlayerMeta(): JSX.Element {
const whitelabel = getCurrentExporterData()?.whitelabel ?? false

const resolutionView = sessionPlayerMetaDataLoading ? (
<LemonSkeleton className="w-1/3" />
<LemonSkeleton className="w-1/3 h-4" />
) : resolution ? (
<Tooltip
placement="bottom"
Expand Down Expand Up @@ -168,7 +168,7 @@ export function PlayerMeta(): JSX.Element {
<div className="overflow-hidden ph-no-capture flex-1">
<div className="font-bold">
{!sessionPerson || !startTime ? (
<LemonSkeleton className="w-1/3 my-1" />
<LemonSkeleton className="w-1/3 h-4 my-1" />
) : (
<div className="flex gap-1">
<span className="whitespace-nowrap truncate">
Expand All @@ -186,7 +186,7 @@ export function PlayerMeta(): JSX.Element {
</div>
<div className="text-muted">
{sessionPlayerMetaDataLoading ? (
<LemonSkeleton className="w-1/4 my-1" />
<LemonSkeleton className="w-1/4 h-4 my-1" />
) : sessionProperties ? (
<SessionPropertyMeta
fullScreen={isFullScreen}
Expand All @@ -206,7 +206,7 @@ export function PlayerMeta(): JSX.Element {
})}
>
{sessionPlayerMetaDataLoading ? (
<LemonSkeleton className="w-1/3 my-1" />
<LemonSkeleton className="w-1/3 h-4 my-1" />
) : (
<>
<Tooltip
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/session-recordings/player/playlist-popover/PlaylistPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export function PlaylistPopoverButton(props: LemonButtonProps): JSX.Element {
))}
</div>
) : playlistsLoading ? (
<LemonSkeleton className="my-2" repeat={3} />
<LemonSkeleton className="my-2 h-4" repeat={3} />
) : (
<div className="p-2 text-center text-muted">No playlists found</div>
)}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function ActivityIndicators({
)
})
) : (
<LemonSkeleton className="w-18 my-1" />
<LemonSkeleton className="w-18 h-4 my-1" />
)}
</div>
)
Expand Down Expand Up @@ -236,8 +236,8 @@ export function SessionRecordingPreview({
export function SessionRecordingPreviewSkeleton(): JSX.Element {
return (
<div className="p-4 space-y-2">
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/3" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton className="w-1/3 h-4" />
</div>
)
}
4 changes: 2 additions & 2 deletions frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export function SessionRecordingsPlaylistScene(): JSX.Element {
return (
<div className="space-y-4 mt-6">
<LemonSkeleton className="h-10 w-1/4" />
<LemonSkeleton className=" w-1/3" />
<LemonSkeleton className=" w-1/4" />
<LemonSkeleton className="h-4 w-1/3" />
<LemonSkeleton className="h-4 w-1/4" />

<div className="flex justify-between mt-4">
<LemonSkeleton.Button />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function PersonDisplayNameProperties(): JSX.Element {
)

if (!currentTeam) {
return <LemonSkeleton className="w-1/2" />
return <LemonSkeleton className="w-1/2 h-4" />
}

return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/settings/project/ProjectSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function WebSnippet(): JSX.Element {
</p>
{currentTeamLoading && !currentTeam ? (
<div className="space-y-4">
<LemonSkeleton className="w-1/2" />
<LemonSkeleton className="w-1/2 h-4" />
<LemonSkeleton repeat={3} />
</div>
) : (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/settings/project/TimezoneConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function TimezoneConfig(): JSX.Element {
const { updateCurrentTeam } = useActions(teamLogic)

if (!preflight?.available_timezones || !currentTeam) {
return <LemonSkeleton className="w-1/2" />
return <LemonSkeleton className="w-1/2 h-4" />
}
const options = Object.entries(preflight.available_timezones).map(([tz, offset]) => ({
key: tz,
Expand Down

0 comments on commit 1e0294d

Please sign in to comment.