From fb364ce740dfe07095266550ca44a5128245b3d6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 2 Jan 2023 16:02:42 +0900
Subject: [PATCH] fix of #8512
https://github.com/misskey-dev/misskey/pull/8512#issuecomment-1368553870
---
packages/frontend/src/pizzax.ts | 8 +++++++
packages/frontend/src/ui/classic.vue | 30 ++++++++++++++------------
packages/frontend/src/ui/universal.vue | 26 +++++++++++-----------
3 files changed, 38 insertions(+), 26 deletions(-)
diff --git a/packages/frontend/src/pizzax.ts b/packages/frontend/src/pizzax.ts
index 642e1f4f7f..7ff09f75fb 100644
--- a/packages/frontend/src/pizzax.ts
+++ b/packages/frontend/src/pizzax.ts
@@ -23,8 +23,13 @@ export class Storage<T extends StateDef> {
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
public readonly state: { [K in keyof T]: T[K]['default'] };
public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
+ public readonly ready: Promise<void>;
+ private markAsReady: () => void = () => {};
constructor(key: string, def: T) {
+ this.ready = new Promise((res) => {
+ this.markAsReady = res;
+ });
this.key = key;
this.keyForLocalStorage = 'pizzax::' + key;
this.def = def;
@@ -72,6 +77,7 @@ export class Storage<T extends StateDef> {
}
}
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+ this.markAsReady();
});
}, 1);
// streamingのuser storage updateイベントを監視して更新
@@ -87,6 +93,8 @@ export class Storage<T extends StateDef> {
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
}
});
+ } else {
+ this.markAsReady();
}
}
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 532829ee2e..6369bb8976 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -7,7 +7,7 @@
<XSidebar/>
</div>
<div v-else ref="widgetsLeft" class="widgets left">
- <XWidgets place="left" @mounted="attachSticky(widgetsLeft)" :classic="true"/>
+ <XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/>
</div>
<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
@@ -17,7 +17,7 @@
</main>
<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
- <XWidgets :place="showMenuOnTop ? 'right' : null" @mounted="attachSticky(widgetsRight)" :classic="true"/>
+ <XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/>
</div>
</div>
@@ -129,18 +129,20 @@ if (window.innerWidth < 1024) {
document.documentElement.style.overflowY = 'scroll';
-if (defaultStore.state.widgets.length === 0) {
- defaultStore.set('widgets', [{
- name: 'calendar',
- id: 'a', place: null, data: {},
- }, {
- name: 'notifications',
- id: 'b', place: null, data: {},
- }, {
- name: 'trends',
- id: 'c', place: null, data: {},
- }]);
-}
+defaultStore.ready.then(() => {
+ if (defaultStore.state.widgets.length === 0) {
+ defaultStore.set('widgets', [{
+ name: 'calendar',
+ id: 'a', place: null, data: {},
+ }, {
+ name: 'notifications',
+ id: 'b', place: null, data: {},
+ }, {
+ name: 'trends',
+ id: 'c', place: null, data: {},
+ }]);
+ }
+});
onMounted(() => {
window.addEventListener('resize', () => {
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 0d235ac205..865616f192 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -113,18 +113,20 @@ mainRouter.on('change', () => {
document.documentElement.style.overflowY = 'scroll';
-if (defaultStore.state.widgets.length === 0) {
- defaultStore.set('widgets', [{
- name: 'calendar',
- id: 'a', place: 'right', data: {},
- }, {
- name: 'notifications',
- id: 'b', place: 'right', data: {},
- }, {
- name: 'trends',
- id: 'c', place: 'right', data: {},
- }]);
-}
+defaultStore.ready.then(() => {
+ if (defaultStore.state.widgets.length === 0) {
+ defaultStore.set('widgets', [{
+ name: 'calendar',
+ id: 'a', place: 'right', data: {},
+ }, {
+ name: 'notifications',
+ id: 'b', place: 'right', data: {},
+ }, {
+ name: 'trends',
+ id: 'c', place: 'right', data: {},
+ }]);
+ }
+});
onMounted(() => {
if (!isDesktop.value) {