alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Releases 8 Activity

feat: add fallback

Browse Source
This commit is contained in:
Alex Lebens
2026-03-15 23:01:12 -05:00
parent 91c9a4bb91
commit 787479e077
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/sections/WeatherSection.astro
View File

@@ -7,7 +7,7 @@ const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesot
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone); const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
--- ---
<section class="max-w-340 2xl:max-w-fullpx-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8"> <section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
<div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14"> <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
<h1 class="smooth-reveal card-text-header block"> <h1 class="smooth-reveal card-text-header block">
Weather in my Area Weather in my Area

18
src/pages/index.astro
View File

@@ -68,10 +68,20 @@ const recentPosts = posts
cityName={weather.location} cityName={weather.location}
timezone={weather.timezone} timezone={weather.timezone}
> >
<div slot="fallback" class="flex items-center justify-center py-10 lg:py-14"> <div slot="fallback" class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
<p class="smooth-reveal card-text-header block"> <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
Loading weather... <h1 class="smooth-reveal card-text-header block">
</p> Loading weather...
</h1>
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center flex justify-center">
<div class="h-6 w-64"></div>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
{Array.from({ length: 5 }).map((_, index) => (
<div class={`card-base h-62.5 w-40 animate-pulse bg-neutral-200 dark:bg-neutral-800 ${index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}`}></div>
))}
</div>
</div> </div>
</WeatherSection> </WeatherSection>