Make sure the loader has the colors and preven CLS

WestCoastJitterbugsOrg · Apr 22, 2024 · ff7dcae · ff7dcae
1 parent 92b45ce
commit ff7dcae
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 45 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -10,19 +10,11 @@ import { WCJ } from './types';
 import { canStoreSelection } from './services/cookies';
 
 type Props = WCJ.Context & {
-	colors: Record<string, string>;
 	parent: HTMLElement;
 	isLoading: boolean;
 };
 
 export function App(props: Props) {
-	useEffect(() => {
-		for (const color in props.colors) {
-			const colorVal = props.colors[color];
-			props.parent.style.setProperty(`--cw-color-${color}`, colorVal);
-		}
-	}, [props.colors, props.parent]);
-
 	const [eventModal, setEventModal] = useState<string>();
 	const [checkedEvents, setCheckedEvents] = useCheckedEvents(
 		props.events.map((x) => x.id),

diff --git a/packages/app/src/AppInit.tsx b/packages/app/src/AppInit.tsx
@@ -6,7 +6,7 @@ import { Loader } from './shared/Loader';
 import { CW } from './types';
 import { MaybeArray } from './types/utils';
 import { WpCwfc } from '@cwfc/shared';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import useSwr from 'swr';
 
 type Props = WpCwfc;
@@ -22,15 +22,19 @@ export default function AppInit(props: Props) {
 }
 
 function AppContent(props: Props & { rootRef: HTMLElement | null }) {
+	useEffect(() => {
+		for (const color in props.colors) {
+			const colorVal = props.colors[color];
+			props.rootRef?.style.setProperty(`--cw-color-${color}`, colorVal);
+		}
+	}, [props.colors, props.rootRef]);
+
 	const formData = new FormData();
 	formData.append('action', 'cwfc_fetch');
 	formData.append('org', props.org);
 	formData.append('pw_hash', props.pwHash);
 
-	const { isLoading, error, data, isValidating } = useSwr<
-		MaybeArray<CW.Event>,
-		string
-	>(
+	const swrResponse = useSwr<MaybeArray<CW.Event>, string>(
 		'cwfc_fetch',
 		async () => {
 			const res = await fetch(props.ajaxUrl, {
@@ -49,6 +53,8 @@ function AppContent(props: Props & { rootRef: HTMLElement | null }) {
 		},
 	);
 
+	const { isLoading, error, data, isValidating } = swrResponse;
+
 	if (isLoading) {
 		return <Loader />;
 	} else if (error && !data) {
@@ -63,7 +69,6 @@ function AppContent(props: Props & { rootRef: HTMLElement | null }) {
 				events={events}
 				categories={categories}
 				selectedEventIds={selectedEventIds}
-				colors={props.colors}
 				parent={props.rootRef}
 				isLoading={isValidating}
 			/>

diff --git a/packages/wordpress/src/cw-filter-calendar.php b/packages/wordpress/src/cw-filter-calendar.php
@@ -4,7 +4,7 @@
  * Plugin URI:        https://github.com/WestCoastJitterbugsOrg/Interactive-CogWork-Calendar
  * Plugin Name:       Interactive Calendar for CogWork data
  * Description:       Calendar using data from cogwork that allows filtering, reading event information and registration
- * Version:           2.2.0
+ * Version:           2.3.1
  * Requires at least: 5.0
  * Requires PHP:      7.3
  * Author:            Jean-Philippe Green

diff --git a/packages/wordpress/src/view.scss b/packages/wordpress/src/view.scss
@@ -3,40 +3,11 @@
 .wp-block-cw-addons-cw-filter-calendar {
 	font-family: Raleway, ui-sans-serif, system-ui;
 	font-size: 16px;
+	min-height: calc(100vh - 128px);
 
 	* {
 		box-sizing: border-box;
 	}
-
-	.loader-container {
-		display: flex;
-		height: calc(100vh - 128px);
-		background: #fff;
-	}
-
-	.loader {
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(0.25turn, transparent, #fff, transparent),
-			linear-gradient(#ddd, #ddd);
-		background-repeat: no-repeat;
-		background-position:
-			min(-100vw, 1200px) 0,
-			0 0,
-			15px 140px,
-			65px 145px;
-		animation: loading 1.5s infinite;
-	}
-
-	@keyframes loading {
-		to {
-			background-position:
-				max(-100vw, 1200px) 0,
-				0 0,
-				15px 140px,
-				65px 145px;
-		}
-	}
 }
 
 .cwfc-modal-open {