From 62d4401f76589ba889402bac7ea5d580c02e2d5e Mon Sep 17 00:00:00 2001 From: dcordz <17937472+dcordz@users.noreply.github.com> Date: Thu, 13 Jun 2024 17:02:34 -0400 Subject: [PATCH] Fade in (#35) * padawan - settimeout to keep container alive while user is on page * padawan - deploy script * fade-in - fade in child component rendered by Layout, don't render loading bar in menu, add scss for striped loading text * fade-in - lazy load dialog wrapper, not modals wrapped by it - remove colors prop from charts, pass lighter/more consistent colors - add animation fade in via opacity to layout so ssr pages fade in - lazy load emojis and sentry to cut down on bundle size - add bundle analysis tool + script --- .ruby-version | 2 +- Gemfile | 2 +- Gemfile.lock | 2 +- app/assets/stylesheets/scss/striped.scss | 39 + app/frontend/components/Layout.tsx | 41 +- .../components/bill/BillComponent.tsx | 17 +- .../components/bill/BillCreatorSummary.tsx | 6 +- .../components/bill/BillSummaryModal.tsx | 39 +- .../bill/charts/BillChartsContainer.tsx | 24 +- .../bill/charts/BillMobileChartsContainer.tsx | 23 +- .../bill/charts/DistrictVotesChart.tsx | 6 +- .../bill/charts/TotalVotesChart.tsx | 6 +- .../bill/creator/BillCreatorOrganization.tsx | 6 +- .../dialogs/ContactLegislatorDialog.tsx | 38 +- .../dialogs/ContactLegislatorDialogButton.tsx | 63 - .../components/dialogs/InviteDialog.tsx | 2 - .../components/dialogs/InviteIconDialog.tsx | 10 +- .../legislator/LegislatorCardSocialItem.tsx | 8 +- .../charts/LegislatorChartsContainer.tsx | 63 +- .../LegislatorMobileChartsContainer.tsx | 74 +- .../legislator/charts/VoterAgreementChart.tsx | 44 +- .../components/user/LocaleSelector.tsx | 14 +- app/frontend/entrypoints/application.tsx | 41 +- app/frontend/hooks/useLocales.ts | 6 +- app/frontend/pages/BillOfTheWeek.tsx | 3 - app/frontend/sway_utils/emoji.ts | 21 +- app/frontend/sway_utils/sentry.ts | 12 +- app/frontend/sway_utils/styles.ts | 11 +- .../dockerfiles/production.alpine.dockerfile | 96 ++ .../production.alpine.dockerfile.dockerignore | 84 ++ docker/dockerfiles/production.dockerfile | 3 +- package-lock.json | 1332 ++++++++++++++++- package.json | 5 +- scripts/deploy.sh | 6 +- vite.config.build.ts | 1 + 35 files changed, 1759 insertions(+), 391 deletions(-) create mode 100644 app/assets/stylesheets/scss/striped.scss delete mode 100644 app/frontend/components/dialogs/ContactLegislatorDialogButton.tsx create mode 100644 docker/dockerfiles/production.alpine.dockerfile create mode 100644 docker/dockerfiles/production.alpine.dockerfile.dockerignore diff --git a/.ruby-version b/.ruby-version index bea438e9..47725433 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -3.3.1 +3.3.2 diff --git a/Gemfile b/Gemfile index cd633b82..66c27e8d 100644 --- a/Gemfile +++ b/Gemfile @@ -2,7 +2,7 @@ source 'https://rubygems.org' -ruby '3.3.1' +ruby '3.3.2' # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main" gem 'rails', '~> 7.1.3', '>= 7.1.3.2' diff --git a/Gemfile.lock b/Gemfile.lock index 628eb95f..f91eaf9b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -534,7 +534,7 @@ DEPENDENCIES webauthn RUBY VERSION - ruby 3.3.1p55 + ruby 3.3.2p78 BUNDLED WITH 2.5.9 diff --git a/app/assets/stylesheets/scss/striped.scss b/app/assets/stylesheets/scss/striped.scss new file mode 100644 index 00000000..3555968e --- /dev/null +++ b/app/assets/stylesheets/scss/striped.scss @@ -0,0 +1,39 @@ +// https://lea.verou.me/demos/css3-patterns.html +// https://stackoverflow.com/questions/14072142/striped-text-in-css + +@import "./_constants.scss"; + +$primary: map-get($sway-theme-colors, "primary"); + +.stripes { + height: 250px; + width: 375px; + float: left; + margin: 10px; + -webkit-background-size: 50px 50px; + -moz-background-size: 50px 50px; + background-size: 50px 50px; + -moz-box-shadow: 1px 1px 8px gray; + -webkit-box-shadow: 1px 1px 8px gray; + box-shadow: 1px 1px 8px gray; + + .horizontal { + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + color-stop(0.5, rgba(255, 255, 255, 0.2)), + color-stop(0.5, transparent), + to(transparent) + ); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); + background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); + background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); + } + + .loading { + background-color: $primary; + } +} diff --git a/app/frontend/components/Layout.tsx b/app/frontend/components/Layout.tsx index 35fe015e..af74fd31 100644 --- a/app/frontend/components/Layout.tsx +++ b/app/frontend/components/Layout.tsx @@ -6,6 +6,7 @@ import React, { PropsWithChildren } from "react"; // Load react-select // @ts-expect-error - unused Select, importing here to have styles available import Select from "react-select"; // eslint-disable-line +import { Animate } from "react-simple-animate"; interface IProps extends PropsWithChildren { [key: string]: any; @@ -13,43 +14,13 @@ interface IProps extends PropsWithChildren { const _Layout: React.FC = ({ children, ...props }) => ( - {React.Children.map(children, (child) => - React.isValidElement(child) ? React.cloneElement(child, { ...child?.props, ...props }) : child, - )} + {React.Children.map(children, (child) => ( + + {React.isValidElement(child) ? React.cloneElement(child, { ...child?.props, ...props }) : child} + + ))}