dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak loading styles (#440)

Browse source
This commit is contained in:
Jeremy 2024-10-12 01:00:06 +05:30 • committed by GitHub
parent b1d9a82d00
commit 23660c5ad1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 98 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/globals.css
View file

@ -105,6 +105,14 @@
.skeleton { .skeleton {
*[class^="text-"] { *[class^="text-"] {
color: transparent; color: transparent;
@apply rounded-md bg-foreground/20 select-none; @apply rounded-md bg-foreground/20 select-none animate-pulse;
}
.skeleton-bg {
@apply bg-foreground/10;
}
.skeleton-div {
@apply bg-foreground/20 animate-pulse;
} }
} }

8
components/custom/weather.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import cx from "classnames"; import cx from "classnames";
import { addHours, format, isWithinInterval } from "date-fns"; import { format, isWithinInterval } from "date-fns";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
interface WeatherAtLocation { interface WeatherAtLocation {
@ -247,7 +247,7 @@ export function Weather({
return ( return (
<div <div
className={cx( className={cx(
"flex flex-col gap-4 rounded-2xl p-4", "flex flex-col gap-4 rounded-2xl p-4 skeleton-bg",
{ {
"bg-blue-400": isDay, "bg-blue-400": isDay,
}, },
@ -260,7 +260,7 @@ export function Weather({
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<div <div
className={cx( className={cx(
"size-10 rounded-full", "size-10 rounded-full skeleton-div",
{ {
"bg-yellow-300": isDay, "bg-yellow-300": isDay,
}, },
@ -286,7 +286,7 @@ export function Weather({
</div> </div>
<div <div
className={cx( className={cx(
"size-6 rounded-full", "size-6 rounded-full skeleton-div",
{ {
"bg-yellow-300": isDay, "bg-yellow-300": isDay,
}, },