mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-03 08:57:54 +00:00
BFlat
33be9f1ca4
**Problem:** On mobile Safari, tapping "Sign up to create" on the create pages froze for 5–10s before the signup modal appeared. Desktop was fine. **Cause:** The modal mounts Google's GSI sign-in widget (`<GoogleLogin>`), which boots a cross-site iframe to `accounts.google.com`. Mobile Safari's tracking prevention (ITP) throttles that cross-site init for several seconds, and because the widget mounted synchronously when the modal opened, the modal's first paint was blocked behind it. The login/signup pages didn't show this because they mount the widget during a route change, hiding the cost. **Fix:** Defer mounting the real GSI iframe until after first paint (`useEffect` + `requestAnimationFrame`). The custom "Continue with Google" button shows instantly; the actual Google button hydrates a frame later, off the critical path. The container has a fixed height, so there's no layout shift. - Centralized in `GoogleLoginButton`, so the login/signup pages benefit too. - Tradeoff: the Google button becomes clickable ~1 frame later (imperceptible). - No behavior change on desktop.
Frontend
This is an nx monorepo that can contain multiple apps and shared libraries.
All commands to run these projects are performed from this directory.
Install dependencies
npm install
Editor2d
Run dev server:
nx dev editor2d
artcraft
Run dev server:
nx dev artcraft
call when starting on main or a new branch:
./clean_modules
The names for @frontend and @storyteller come from the package.json file in the libs folder.
import { Login } from "@frontend/login";
import { api } from "@storyteller/api";
For shared UI components, import from @storyteller/ui-[componentname].
import { Button } from "@storyteller/ui-button";
import { Modal } from "@storyteller/ui-modal";
building:
npx nx build artcraft
npx nx build editor2d
dev:
npx nx dev artcraft
npx nx dev editor2d
# component build
1.
npx nx g @nx/react:library libs/components/toaster --import-path=@storyteller/ui-toaster --bundler=vite
npm install
2.import it first in code
3.nx sync
4.nx build
or
# frontend build
in frontend folder
% nx build -project type
% nx build artcraft
% nx dev artcraft