cal.pub0.org/packages/ui/components/apps/SkeletonLoader.tsx

52 lines
1.5 KiB
TypeScript
Raw Normal View History

import { ShellSubHeading } from "../layout";
import Meta from "../meta/Meta";
import { SkeletonText } from "../skeleton";
export function SkeletonLoader({
Improve multilingualism and fix search routes (#5334) * fixed search routes * made static text multilingual and fixed german translations # Conflicts: # apps/web/components/availability/Schedule.tsx * delete empty file created by fixing merge conflicts * fixing TextField placeholder by passing attendeeName and fixed json variable * Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail * seperated whitelabel and improved translations * added missing translation * added missing translation for webhooks * Updated AdminAppsView with dynamic translations. Added translations for german and english files only. * changed back to one liner * updated german and english translations for impersonation.tsx * updated german and english translations for impersonation.tsx and users.tsx. added missing german translation for timeformat_profile_hint * updated german and english translations for team-billing-view.tsx * updated german and english translations for LicenseRequired.tsx * updated routes for profile and avatar * yarn.lock updated from newer changes * Revert " yarn.lock updated from newer changes" This reverts commit efd9a90bf774371a331861e4fb441ab4f4d0b7fd. * sanitize dangerouslySetInnerHTML to prevent xss attacks * tried to fix window title flicker * changed ssdInit to ssrInit for getServerSideProps. Serverside translation works but current route still set as a window title * flicker with route in window title is caused here. It is not necessary to check if isPublic and session is false because it already gets checked in useRedirectToLoginIfUnauthenticated hook. * fixed window title translation flicker for availability page * fixed window title translation flicker for teams page * fixed window title translation flicker for workflow page * fixed error that div may not be rendered within p element * fixed window title translation flicker for booking page * fixed window title translation flicker by adding getServerSideProps * Only set HeadSeo if an page title exists. If window title is set by the Meta component, shell is causing a flicker because it overwrites the title which is set by Meta. It is a problem especially for settings pages. * fixed window title translation flicker by adding the Meta component to the skeleton * fixed condition * removed condition and added withoutSeo for settings pages * using translations for create team page further fixed flicker for window title * fixed flicker for window title for event-type creation page * fixed flicker for window title for availability creation page * fixed flicker for window title for sso page * updated conferencing en translation * added meta.CTA back it was mistakenly removed * fixed flicker for workflows page * fixed missing variable * Update packages/ui/v2/core/Shell.tsx * Delete index.tsx * Update sso.tsx * Updates subdmoules Co-authored-by: maxi <maximilian.oehrlein@clicksports.de> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com>
2022-12-07 20:53:44 +00:00
className,
title,
description,
}: {
className?: string;
title?: string;
description?: string;
}) {
return (
<>
<ShellSubHeading title={<div className="bg-subtle h-6 w-32" />} {...{ className }} />
Improve multilingualism and fix search routes (#5334) * fixed search routes * made static text multilingual and fixed german translations # Conflicts: # apps/web/components/availability/Schedule.tsx * delete empty file created by fixing merge conflicts * fixing TextField placeholder by passing attendeeName and fixed json variable * Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail * seperated whitelabel and improved translations * added missing translation * added missing translation for webhooks * Updated AdminAppsView with dynamic translations. Added translations for german and english files only. * changed back to one liner * updated german and english translations for impersonation.tsx * updated german and english translations for impersonation.tsx and users.tsx. added missing german translation for timeformat_profile_hint * updated german and english translations for team-billing-view.tsx * updated german and english translations for LicenseRequired.tsx * updated routes for profile and avatar * yarn.lock updated from newer changes * Revert " yarn.lock updated from newer changes" This reverts commit efd9a90bf774371a331861e4fb441ab4f4d0b7fd. * sanitize dangerouslySetInnerHTML to prevent xss attacks * tried to fix window title flicker * changed ssdInit to ssrInit for getServerSideProps. Serverside translation works but current route still set as a window title * flicker with route in window title is caused here. It is not necessary to check if isPublic and session is false because it already gets checked in useRedirectToLoginIfUnauthenticated hook. * fixed window title translation flicker for availability page * fixed window title translation flicker for teams page * fixed window title translation flicker for workflow page * fixed error that div may not be rendered within p element * fixed window title translation flicker for booking page * fixed window title translation flicker by adding getServerSideProps * Only set HeadSeo if an page title exists. If window title is set by the Meta component, shell is causing a flicker because it overwrites the title which is set by Meta. It is a problem especially for settings pages. * fixed window title translation flicker by adding the Meta component to the skeleton * fixed condition * removed condition and added withoutSeo for settings pages * using translations for create team page further fixed flicker for window title * fixed flicker for window title for event-type creation page * fixed flicker for window title for availability creation page * fixed flicker for window title for sso page * updated conferencing en translation * added meta.CTA back it was mistakenly removed * fixed flicker for workflows page * fixed missing variable * Update packages/ui/v2/core/Shell.tsx * Delete index.tsx * Update sso.tsx * Updates subdmoules Co-authored-by: maxi <maximilian.oehrlein@clicksports.de> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com>
2022-12-07 20:53:44 +00:00
{title && description && <Meta title={title} description={description} />}
<ul className="bg-default border-subtle divide-subtle -mx-4 animate-pulse divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
<SkeletonItem />
<SkeletonItem />
<SkeletonItem />
</ul>
</>
);
}
function SkeletonItem() {
return (
<li className="group flex w-full items-center justify-between p-3">
<div className="flex-grow truncate text-sm">
<div className="flex justify-start space-x-2 rtl:space-x-reverse">
<SkeletonText className="h-10 w-10" />
<div className="space-y-1">
<div>
<SkeletonText className="h-4 w-16" />
</div>
<div>
<SkeletonText className="h-4 w-32" />
</div>
</div>
</div>
</div>
<div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
<SkeletonText className="h-11 w-32" />
</div>
</div>
</li>
);
}